CSS12 - 清除浮动

浮动对布局来说跟方便，但是浮动也会导致一些问题。例如，在某些不方便指定父元素高度的盒子中，其子元素若是都设置浮动，父元素则会因此高度为 0。清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度为 0 的问题。

如图所示：

总结起来就是，当父元素不给高度的时候，内部元素不浮动时会撑开父元素，内部元素浮动时，父元素会没有高度。在网页布局中这会影响后面的布局。

常用的清除浮动的方法（四种）

一、额外标签法

额外标签法，也称 "隔墙法"，即，在最后一个浮动标签后新加一个标签，给其设置 clear：both;

如图所示：

这种方法较为简单，但是会增添很多不必要的标签。不推荐使用此方法。

二、父级添加 overflow：hidden

如图所示：

这种方法代码简洁，但是内容增多时容易使不会自动换行的内容被隐藏掉，无法显示出要溢出的元素。不推荐使用此方法。

三、使用 after 伪元素清除浮动

如图所示：

这种方式符合闭合浮动思想，结构语义化正确，只需要把上图中红框内两端代码复制到 css 中即可，要注意父元素名不要写错。推荐使用这种方法。

四、使用 before 和 after 双伪元素清除浮动

这种方法也是只需要将红框内代码添加到 css 中即可，要注意父元素名不要写错。推荐使用。