本文共 854 字，大约阅读时间需要 2 分钟。

清除浮动，指的是清除浮动与浮动之间的影响。

如下图，第二组中的第1个li，去贴靠第一组中的最后一个li了（我们本以为这些li会换行分成两排）。

造成这个现象的根本原因是：li的父亲div没有设置高度，导致这两个div的高度均为0px，

div的高度为零，导致不能给自己浮动的孩子，撑起一个容器。

撑不起一个容器，导致自己的孩子没办法在自己的内部进行正确的浮动。

方法1：给浮动元素的祖先元素加高度（很少使用）

给div设置一个正确的合适的高度，且高度大于儿子的高度

但此方法很少使用，因为div能被内容撑高，如果设置固定的高度，无法实现页面的自适应！

总结：

如果一个元素要浮动，那么它的祖先元素一定要有高度。

有高度的盒子，才能关住浮动。（非常重要）

只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。

方法2：clear:both;

both指的是左浮动、右浮动都要清除。clear:both的意思就是：不允许左侧和右侧有浮动对象。

这种方法有一个非常大的致命问题，它所在的标签，margin属性失效了。因为div的高度为零。

方法3：外墙法

在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性；同时，给它设置height，以达到margin的效果

外墙法虽然可以把两个div隔开，但是这两个div没有高

方法4：内墙法（常用）

与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让box1有高）。即：box1的高度可以自适应内容。

方法5：overflow:hidden;（常用）

overflow:hidden;的本意是将所有溢出盒子的内容隐藏掉，但是能够用于浮动的清除。

一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的偏方， 并且,overflow:hidden;能够让margin生效。

转载地址：http://fomkk.baihongyu.com/