clear CSS
属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear
属性适用于浮动和非浮动元素。
clear
属性被用于控制浮动。比较下面两个例子:
<div class="box">...</div> <section>...</section>
.box { float: left; width: 200px; height: 100px; margin: 1em; }
我感觉好像我在漂浮!
</div>在这个例子中, section
元素实际上是在 div
之后的(注:DOM
结构上)。然而 div
元素是浮动到左边的,于是 section
中的文字就围绕了 div
,并且 section
元素包围了整个元素。如果我们想让 section
显示在浮动元素之后呢?
.box { float: left; width: 200px; height: 100px; margin: 1em; } .after-box { clear: left; }
我感觉好像我在漂浮!
</div>使用 clear
我们就可以将这个段落移动到浮动元素 div
下面。你需要用 left
值才能清除元素的向左浮动。你还可以用 right
或 both
来清除向右浮动或同时清除向左向右浮动。