首页 > 代码库 > 清除浮动的几种方式

清除浮动的几种方式

最近来了个小徒弟,总是被浮动的盒子整蒙圈了,作为小师父的我就给他梳理一下:

 

浮动就是页面布局中是某些盒子添加了float:left 或float:right的类名或属性。其具有以下特点:

  1. 浮动的元素会脱离标准流;
  2. 浮动后的元素会覆盖标准流的元素;
  3. 浮动规则:浮动找浮动,不浮动找不浮动;
  4. 浮动显示的位置与原本不浮动的位置是对应的;
  5. 浮动的元素会影响下面的元素;
  6. 浮动的元素会改变显示方式(行内块级元素):

    a) 不管元素是行内元素还是块级元素都会在同一行显示;

    b) 浮动后的元素可以设置宽高;

 

  例:一个父盒子中有一个子盒子,父盒子没有设置宽高,若子盒子在父盒子中浮动,那么下面的元素会自动补位,所以需要清除浮动(clear:both)。

 

清除浮动:

 

  1. 额外标签法:在浮动的盒子下面再放一个标签,在这个标签中使用clear:both类名或属性来清除浮动对页面的影响:

    a) 内部标签:会将这个父盒子的高度重新撑开。

    b) 外部标签:会将浮动效果清楚,但不会撑开父盒子。

    注意:一般不使用此方法,会增加页面标签。

 

   2. 使用overflow属性:先找到浮动盒子的父元素,再在父元素中添加overflow:hidden属性。

    注意:一般不使用此方法,因为溢出这个元素所在的区域会被隐藏。

 

   3.使用伪元素:

    .clearfix:after {
        content: ‘‘;
        height: 0;
        line-height: 0; /*或 overflow:hidden*/
        display: block;
        visibility: hidden;
        clear: both;
    }
    .clearfix {
        zoom: 1;  /*兼容ie6*/
    }

 

   4. 双伪元素标签:页面上不存在的元素可以通过css添加上去,每个元素都有自己的伪元素。

 

    .clearfix:before,
    .clearfix:after {
        content: ‘‘;
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        zoom: 1;
    }

 

这是我总结的几种清除浮动的方式,希望对大家有帮助。

清除浮动的几种方式