清除浮动 Demo
浮动元素的块级兄弟元素
我设置了左浮动 float: left ,但没有设置背景色。
我没有设置浮动，设置了蓝色背景色。
可以看出，第一个 div 并没有设置颜色，但实际却为蓝色背景，这是因为元素浮动后，它的块级元素会无视它的位置，仍然占据整一行，而 div 的内容则会自动调整，正是这样的处理，使到实际使用浮动布局时产生很多未知影响。
浮动元素的内联兄弟元素与高度塌陷
我设置了左浮动 float: left ,并设置橙色背景色。
我是 span ，没有设置浮动，设置了蓝色背景色。
这里同时看出两个问题。一是内联元素会围绕在设置了浮动的元素周围，而不会像块状兄弟元素那样占据一整行。另外由于浮动的元素是脱离文档流，因此父元素只会以没有浮动的 span 的高度为基础撑开自己，这就会造成父元素“塌陷”了。
使用 clear: both 清除浮动
我设置了左浮动 float: left
我设置了 clear: both
空白 div 方法
我设置了左浮动 float: left
我是页脚，上面没有空 div
我设置了左浮动 float: left
我是页脚，我的上面添加了一个设置了 clear: both 的空 div
overflow 方法
我的父元素没有设置 overflow: hidden ，出现了高度塌陷
我设置了左浮动 float: left
我是页脚，但是我也设置了左浮动。
我的父元素设置了 overflow: hidden
我设置了左浮动 float: left
我是页脚，但是我也设置了左浮动。
:after 伪元素的方法
我设置了左浮动 float: left
我是页脚，但是我也设置了左浮动。