08-兄弟级和父子级清除浮动

清除浮动常分为两种：兄弟级元素和父子级元素清除浮动

兄弟级元素清除浮动：

添加空白块级元素的方法,清除浮动前
优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化比较差。

清除浮动后：

父子级元素清除浮动：（三种）

(1)给父级元素添加一个伪元素 ::after
因为浮动元素脱离文档流，而父元素没有设置高度，所以父元素无法被子元素撑开。 需要清除浮动

.father::after {
 content: '';
 display: block;
 clear: both;
}

after方式为空元素的升级版，好处是不用单独加标签了。(较常用)
优点：符合闭合浮动思想，结构语义化正确
缺点：由于IE6-7不支持：after，使用zoom：1，触发hasLayout。

(2)给父级元素添加overflow：hidden

可以通过触发BFC的方式，实现清楚浮动效果。
优点：代码简洁(慎重使用，若该父盒子里还有position定位会引起麻烦)
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

（3） 使用before和after双伪元素清除浮动：(较常用)

注意：是给父亲添加clearfix