Css清除浮动

这周在逆战班学到了很多的内容，针对于浮动，我有一些感悟。
首先什么是浮动？
元素浮动就是通过给元素添加float:left/right;来使元素脱离文档流，让元素能够并排显示，直到这一行放不下下个元素，再换行。
那为什么要清楚浮动呢？
元素浮动后，脱离了文档流，就不会再占据原有的空间，而原本被这个元素撑开的父元素就会高度塌陷，高度就会变成0px。这会导致与父元素同辈的元素不能够正常显示。所以要进行清楚浮动的设置。

下面是几种清楚浮动的方法。
1.额外标签法 (不推荐)
.clear {
clear: both;
}

优点：方便简洁 缺点：添加了无用的标签 语义化不明

2.给父元素添加overflow:hidden; (不推荐)
#wrap {
width: 500px;
margin: 0 auto;
background: pink;
font-size: 20px;
overflow: hidden;
}
优点：代码会比较简洁；
缺点：当父元素内容增多的时候，超出的部分会被截去

3.使用伪类元素:after 清除浮动 给父元素添加 (推荐)
.clearfix:after {
content: ‘’;
display: block;
clear: both;
height: 0;
visibility: hidden;
}

优点：符合闭合浮动思想，语义化明确 缺点：低版本ie不能兼容

4.使用before和after双伪类元素清除浮动
.clearfix:after,.clearfix:before{
content: “”;
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
优点：代码更简洁
缺点：需要zoom:1;出发hasLayout。
以上方法都可以清楚浮动，达到下图效果。