清除浮动

盒子高度问题

在标准流中内容的高度可以撑起盒子的高度
在浮动流中浮动元素内容的高不可以撑起盒子的高

清除浮动方式一

给前面的父盒子添加高度

注意点:
在企业开发中能不写高度就不写高度, 所以这种方式不常用

清除浮动方式二

利用clear:both; 属性清除前面浮动元素对我的影响

注意点:
使用clear:both 之后margin属性会失效, 所以不常用

清除浮动方式三（外墙法）

在两个有浮动子元素的盒子之间添加一个额外的块级元素

注意点
在外墙法中可以通过设置额外标签的高度来实现margin效果
搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以`不常用`

清除浮动方式四（内墙法）

在前面一个盒子的最后添加一个额外的块级元素

注意点:
内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性
和外墙法一样需要添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦

清除浮动方式五

什么是overflow:hidden?
overflow:hidden的作用是清除溢出盒子边框外的内容

如何利用overflow:hidden;清除浮动?
给前面一个盒子添加overflow:hidden属性

注意点:
由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1; 实际上*zoom:1能够触发IE8之前IE浏览器的hasLayout机制
优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突

清除浮动方式六

给前面的盒子添加伪元素来清除浮动

注意点:
本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素
添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西