CSS清除浮动

什么是清除浮动？

当容器的高度为auto或者未设置高度，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。

来看个例子，在页面布局时，一个父DIV嵌套两个小的DIV，父DIV高度未设置或者设为auto，随着实际内容的增加，大的DIV的高度会被其中的小DIV撑开，如下图

现在需要将DIV1与DIV2并排放置，将DIV1左浮动、DIV2右浮动以达到这样的效果

而实际上却是这样的

如何清除浮动？

我们引入一个例子来说明如何做到清除浮动，页面代码如图

实际布局如下

清除浮动方法

方法一：添加额外空元素

通过在浮动元素末尾添加空标签如：

优点：简单易懂、容易掌握、兼容性好

缺点：违背了样式与结构分离的原则，倘若页面需要清除的浮动很多，导致代码不易维护

方法二：使用css设置父元素overflow属性

给浮动元素的容器添加或可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，目前基本不考虑低版本的IE兼容性问题。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

效果图

优点：代码量少，没有结构与语义化的问题

缺点：兼容性问题