css clear属性

Thu, Feb 14, 2013

• css cookbook

开始学习css。 css cookbook 2.21讨论了clear的用法。

简单做了个实验。

<img class='leftFloat' />
<p>test test line 1</p>
<img style='clear:left' class='rightFloat'/>
<p style='clear:left'>test test line 2</p>
<p>test test line 3</p>

总的感觉就是clear可以某方向(left/right/both)上的浮动元素算成固定元素，来决定当前元素的高度。

书中只是简单地一句话，实践起来float和固定元素需要分别clear。(可以将两个clear:left随便去掉一个，相应的元素就会上浮)。

2.22也讨论了利用clear来撑开float元素所在容器的方法。参考里面也描述了同样的用法。

一些参考：

http://www.w3school.com.cn/css/css_positioning_floating.asp 介绍了floating和clear，涵盖了2.21 & 2.22的内容