网页布局混乱,clear:both不起作用
问题 2051
网页布局混乱,两个DIV位置错乱了
-
div产生位置错乱原因,主要是float浮动造成的,需要使用clear来清附浮动。
但是要注意:
clear
属性只是在block
元素是起作用,如果你把clear:both
用在一个inline-block
或inline
元素上,clear:both
是不会起任何作用的。如果你想对一个
inline-block
或inline
元素施加clear:both
的效果,最简单的方法是用div
元素把它包起来,让在这个div
上利用::after
伪元素实现其内部的元素的clear:both
,下面是一种参考的写法:.clearfix:after { clear:both; content:"."; display:block; height:0; line-height:0; visibility:hidden; }
将上面的
.clearfix
放在包裹inline-block
或inline
的float元素的div
上,它就像表现出类似clear:both
的效果。6年前