清除浮动的几种方式

Posted 2020-08-26 丶小馨

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

 

浮动就是页面布局中是某些盒子添加了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;
　　　　}

 

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