清除浮动方法

• 清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度为0的问题

• 父盒子设置一个border, 内部放两个盒子,给他们设置浮动,就会默认撑开父盒子

• 给两个盒子加上float属性的话, 底部盒子就会顶上来,两个盒子就浮动了起来

清除浮动的方法(四种)

1. 额外标签法: 给某某清除浮动, 在其最后添加一个空白标签
   优点: 通俗易懂书写方便
   缺点: 添加许多无意义的标签, 结构化较差
   clear: both;

2. 父级添加overflow方法: 可以通过BFC的方式, 清除浮动. 需定义width或zoom: 1, 同事不能定义height, 用overflow: hidden时, 浏览器会自动检查浮动区域的高度
   优点: 简单 代码少 浏览器支持好
   缺点: 内容多时不会自动换行容易造成内容隐藏, 不能和position配合使用, 超出的尺寸会被隐藏
   overflow: hidden;

• 不要加错位置, 是给父元素加, 按需使用

3. 使用after伪元素清除浮动: after方式为空元素的升级版, 不用加单独标签.
   优点: 符合闭合浮动思想, 结构语义化正确
   缺点: IE6-7不支持:after, 使用zoom: 1

4. 使用before和after双伪元素清除浮动: (较为推荐)
   优点: 代码更简洁