清除浮动以及:after元素

Posted 2020-10-07

http://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html

以上这篇示意图把清除浮动的几种方法讲的非常清楚了，其中有两种方法比较常用，一种是给父元素加overflow:hidden的属性，一种是给父元素设置:after伪类。

原文中用after清除浮动时，用了以下代码：

clearfix::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

这里给after设置了一个内容，即“.”，所以会产生一个额外的行来包含内容，因此要将height设为0,visibility设为hidden。也可以不给after设置内容，如果没有内容，自然也不用设置height:0清除下面的空行了，也就不用写visibility使内容隐藏了。如果不用clear:both,伪类内容会浮动到两个浮动元素旁边，如果不用display:block,依然会浮动到两个浮动元素旁边。