清除浮动1、为什么清除浮动浮动效果会带来不好的效果：子元素浮动会导致父元素高度塌陷。具体解释：当浮动框的高度超过包含框时，包含框不会自动延伸关闭浮动元素，会出现“高度塌陷”的现象。也正是因为浮动的这个特性，使得普通流中的元素浮动后，因为containingbox内部没有其他普通流元素，所以高度为0。在实际布局中，这不是我们想要的希望，所以需要关闭浮动元素，让包含框显示正常高度。示例：1）如下图所示：正常流程中，父元素container1的高度为3个div的高度。2）现在如果你想并排显示三个div，为三个div设置float：left；效果如下。问题来了：父元素container1的高度塌陷了。3）当父元素container1的高度塌陷时，它下面的元素会往上跑。强调：1）一般情况下：如果div里面有内容，可以被内容支撑，但是如果内容是浮动的，就不能支撑高度，它的高度就变成了0。2）在上面的例子中，container1本来高度是拉长的，但是因为div1,2,3都设置了浮动，所以它的高度没有了，变成了0。2.清除浮动的两种基本方法：1.使用clear:both;清除：两者；清除浮动。当元素流入页面时，元素的左侧、右侧或两侧不允许有浮动内容。1）“内墙法”：在浮动元素末尾添加一个冗余元素，并为其设置clear:both；代码如下图所示：原理：由于其左右两侧不能有浮动元素，所以会在浮动元素下方运行，container1父元素需要包裹#cl，其高度为伸展。注意：#cldiv的高度为0；缺点：给页面添加无意义的冗余元素很麻烦，不符合语义。2）clearfix:after伪元素方法：给父元素添加一个clear类，方便语义化。原理：为了减少写一个无意义的div元素，使用after在clearfix内容后面添加一个内容作为“元素”。传递内容：“.”；生成内容作为最后一个元素。显示：块；使生成的元素显示为块级元素；高度：0；防止生成的内容破坏原有布局的高度；可见性：隐藏；使生成的内容不可见；缩放：1；触发IEhasLayout。除了清除：两者；用于清除浮动，其他代码是隐藏content生成的内容。更精简的写法：attachcontentandafter用法：after用法示例：在container1末尾添加1个内容，页面效果如下图所示。2.父元素BFC或haslayout父元素设置为overflow:hidden；BFC相关知识没有完全理解，理解后再详细写。
