清除浮动

什么是浮动

浮动问题的原因

清除浮动的方法

一、什么是浮动

我们对元素进行了浮动（float），我们的元素就会脱离文档流，但仍然占据文档的空间

在CSS中，任何元素都可以浮动。浮动元素会生成一个会块级框，效果类似如display: inline-block(张鑫旭)

二、浮动问题的原因

只含有浮动元素的父元素，在显示时不考虑子元素的位置，就当他们不存在一样，这样就造成了显示出来，父元素好像空容器一样

三、清除浮动的方法

1.添加空元素

<div> 
   <div style="float:left;width:45%;"></div>
   <div style="float:right;width:45%;"></div>
   //添加空元素
   <div style="clear:both;"></div>
</div>

原理：父容器必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素包括进去了

缺点：违背了Web语义化

2.浮动父容器

将父容器改成改成浮动定位，这样他就可以带着子元素一起浮动了

<div style="float:left;">
   <div style="float:left;width:45%;"></div>
   <div style="float:right;width:45%;"></div>
</div>

缺点：父容器变成浮动之后，会影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动

3.BFC包含浮动元素

给父容器添加overflow: hidden, 变得可以自动包含浮动的子元素，从而能够识别出浮动子元素的位置

<div style="overflow: hidden;">
   <div style="float:left;width:45%;"></div>
   <div style="float:right;width:45%;"></div>
</div>

缺点： IE6不支持，另一个是一旦子元素的大小超过父容器，就会出现显示问题

5.万能清除法 使用after伪元素清除浮动（主流方法）

使用：after伪元素，就可以在父容器的尾部创建一个子元素

.clearfix:after {
  content: " ";
  dispaly: block
  clear: both;
  height: 0;
  overflow： hidden;
  visibility: hidden;
}
//同时兼容IE6，7;配合zoom
.clearfix: {
  zoom: 1;
}

after伪类添加内容

1.:after {content:''添加的内容" } IE6,7下不兼容

zoom缩放

1.触发IE下的haslayout,是元素根据自身内容计算宽高
2.Firefox不支持

四、Nicolas Gallagher贴出了通用的生产代码

1、content内容为空格用于修复opera下文档中出现contenteditable属性在清理浮动元下的空白
2、使用display：table而不是block，可以防止容器和子元素margin-top折叠，这样能使清理效果与BFC，IE6/7 zoom:1 一致
.cf:before,
.cf:after {
　　content:"";
　　display:table;
}

.cf:after {
　　clear:both;
}

/* For IE 6/7 (触发 hasLayout实现包含浮动) */
.cf {
　　zoom:1;
}

参考连接

清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
浮动元素容器的clearing问题