Question

求解CSS样式中float属性的问题?

我所知道的 第一：float属性用来控制 元素 浮动。
第二：可以使用 clear属性 清除浮动，让浏览器兼容。如下：
<div id="content1">
<div style="float ：left"></div>
<div style="float ：right"></div>
<div sytle="clear ：both"></div>
</div>
问题一：一直搞不明白，既然清除了浮动（如上例子），就不应该再浮动了，即两个div应该 各自 独占一行，而事实是两个div仍然浮动在 左右两边 ？？
问题二：“clear ：both”，两个浮动的div，是在它的上面啊？怎么会是both呢？
在<div sytle="clear ：both"></div>这行代码中，both指的不就是 本元素(div) 的左右
两边吗？
向 jszjgqq 和 363822803 提问 ： 清除浮动是 清除自身的浮动？ 还是 清除其它元素浮动对自己的影响？

Answer 1

问题补充：向 jszjgqq 和 363822803 提问 ： 清除浮动是 清除自身的浮动？ 还是 清除其它元素浮动对自己的影响？

清除其它元素浮动对自己的影响

=======================================================

问题一：一直搞不明白，既然清除了浮动（如上例子），就不应该再浮动了，即两个div应该 各自 独占一行，而事实是两个div仍然浮动在 左右两边 ？？

答: 清除浮动是清除的本身,也就是说第三个div元素不会进行浮动,而前面两个div不受任何的影响.如果说第三个元素不清除浮动的话那就会跟着上一个元素进行浮动.

问题二：“clear ：both”，两个浮动的div，是在它的上面啊？怎么会是both呢？
在<div sytle="clear ：both"></div>这行代码中，both指的不就是 本元素(div) 的左右
两边吗？

clear ：both 的意思是清除左右两边的浮动元素,

我建议你前面2个div 都写float:left 这样测试的时候更加好理解

如果你这么写

<div id="content1">
<div style="float ：left"></div>
<div style="float ：left"></div>
<div></div>
</div>

上面代码的第三个div你会发现紧贴着第二个div后面.

如果第三个div写style="clear:both"的话就不会浮动了,或者说clear:left 清除左浮动.

我觉得float很好的理解,你自己多写几个例子研究下就行了,不要光凭着想象去解决问题,要用实际的例子去证明你的猜测.

Answer 2

上面的有浮动，下面的清除浮动只是为了上面的浮动更流畅，下面的层不会乱飞

建议适量的试一下overflow:hidden;zoom:1这种清除浮动的方式，加在id="content1"中。

Answer 3

<div sytle="clear ：both"></div>
设置的清除浮动是指清除本身得div不受上面两个div浮动得影响。不是清除上面两个div的浮动。both是指left和right，不是上面两个得左右两边，意思是清楚left和right浮动得所有影响。如果只是指定left或right得话清楚的只是其中一种影响，可能还会受到另外一种浮动得影响

Answer 4

呵呵 清楚浮动 是清楚自身两边的元素。