CSS为什么要清除浮动？怎么清除？

为什么？

• 子元素的浮动导致了父元素高度的塌陷。

怎么办？

两个方法：

• 方法一：脚底插入clear:both;
• 方法二：父元素BFC(ie8+)

方法一：

• 采用伪元素，这里我们使用:after。添加一个类clearfix： （推荐）
  在我们需要清除浮动时，只需要给父元素追加clear类即可，既方便又符合语义化。
  该方法的缺点是，IE6/IE7不识别:after伪元素，存在兼容性问题
  代码：

<div class="box clearFix">
	<div class="child">11</div>
	<div class="child">22</div>
	<div class="child">33</div>
</div>
<style type="text/css">
	.box {
		width: 700px; margin: 0 auto; border: 2px solid green;
	}
	.child {
		width: 200px; height: 200px; background: red; float: left; margin: 10px;
	}
	.clearFix::after{
		content: '';
		display: table;
		clear: both;
	}
</style>

方法二：

• 使用overflow属性，给父元素添加overflow:hidden ||auto;

• BFC/haslayout通常声明

    float:left/right
    position:absolute/fixed
    overflow:hidden/scroll(IE7+)
    display:inline-block/table-cell(IE8+)
    width/height/zoom:1/…(IE6/IE7)
  

• BFC块级格式化上下文有以下特征：

    内部的Box会在垂直方向，从顶部开始一个接一个地放置。
    Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
    每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
    BFC的区域不会与float box叠加。
    BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
    计算BFC的高度时，浮动元素也参与计算。
  

• 不单单只有给父元素添加overflow:hidden才可以创建块级格式化上下文，下列方法都可以：

    浮动 (元素的 float不为 none）
    绝对定位元素 (元素的 position为 absolute 或 fixed)
    行内块 inline-blocks (元素的 display: inline-block)
    表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
    表格标题 (元素的 display: table-caption，HTML表格标题默认属性)
    overflow的值不为 visible的元素
    弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)
  

• 采用float属性之后产生的现象：

    元素block块状花（砖头化）
    button默认的display是inline-block,加上float:left之后display变为block
    破坏性造成的紧密排列特性（去空格化）