清除浮动 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
我是页脚,但是我也设置了左浮动。