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,依然会浮动到两个浮动元素旁边。
时间: 2024-10-29 20:37:28