浮动float：浮动的工作原理和特性及清除浮动方法

浮动：float属性用域创建浮动框，可以向左或右移动直至包含块或另一浮动框的边缘。

1. 浮动的定义

        元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止(会挨着父元素左边或右边排列，如果之前有浮动的元素 会挨着浮动的元素排列)。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动的元素虽然会脱离正常的文档流，但它还是会影响到正常文档流中的文字排版。

2. 浮动的工作原理

浮动（float）是 CSS 定位属性。浮动元素从网页的正常流动中移出，但是保持了部分的流动性，会影响其他元素的定位（比如文字会围绕着浮动元素）。这一点与绝对定位不同，绝对定位的元素完全从文档流中脱离。

• 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
• 浮动元素碰到包含它的边框或者其他浮动元素的边框停留

3. 浮动的特性

• 浮动元素会脱离标准流（脱标），即浮动的盒子不再保留原先的位置
• 浮动的元素会在一行内显示并且元素顶部对齐（除非宽度不够在一行才会换行）
• 浮动的元素会具有行内块元素的特性，可以设置宽高
• 设置了一样属性的浮动元素是紧挨着的，不会有缝隙

4. 浮动元素会造成父元素塌陷

        当给元素设置float之后,元素脱离文档流,父元素没有设置height,造成塌陷。

清除浮动的方法：

        1）给父元素设置overflow：hidden，形成bfc

        2）在需要清除浮动的元素后面添加空标签，使用clear：both

        3）给父元素设置高度，高度需要大于子元素的最大高度

        4）使用：after伪元素

#parent:after {
  content: "";   
  /* 伪元素是行内元素，需要转变为块元素 */
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
 
#parent {
  /* 兼容IE6、7 */
  *zoom: 1;
}

        5） 双伪元素 :after、:before 清除浮动

#parent:before, #parent:after {
  content: "";
  /* 把模式转换成表格 */
  display: table;
}
 
#parent:after {
  clear: both;
}
 
#parent {
  /* 兼容IE6、7 */
  *zoom: 1;
}