日期:2014-05-20  浏览次数:20514 次

|M| 第一次学CSS的问题 float问题
<div   style= "float:left "> A
</div>
<div   style= "float:right "> B </div>
C
上面的代码按我想像应该显示为:
A                                       B
C
但却是
AC                                     B
为什么

------解决方案--------------------
<div style= "float:left "> A
</div>
<div style= "float:right "> B </div>
<br/>
C
------解决方案--------------------
因为div是层,处在不同的Z轴上
------解决方案--------------------
你不妨在后边再加上

<div style= "float:left "> D </div>

试试,会更有意思。

对于许多样式不同的浏览器的解释往往也是不同的,何况人来读呢。选择比较“俗”的样式,不要选择看上去好像很学术、很漂亮的。
------解决方案--------------------
<br /> 其实已经被某些“标准”删去了,原因是“不符合css的终极目标。还好,浏览器即使在你声明要按这个标准解释的时候,也会正常执行 <br /> 。这就是一例。
------解决方案--------------------
div是层的话是不是会被某些浏览器给屏敝掉啊
----------------------------------------
div不会给屏蔽掉,div替换table是必然...
------解决方案--------------------
<div style= "float:left "> A
</div>
<div style= "float:right "> B </div>
C
上面的代码按我想像应该显示为:
A B
C
但却是
AC B
为什么

原因是你忘记配合clear:both了
如果你想要得到
A B
C
这样显示的效果,就
<div style= "clear:both "> C </div>
典型的应用是页脚 不能自适应填充到页面最底部了。

你如果学过css排版就会知道 给 <div> 加上float属性以后,剩余下来的文本或者容器,会自适应宽度,满行的填充父容器了。如果你的文本够多的话,可以发现剩下来的文本会排版到 <div style= "float:left "> A </div> 这个块的下面去了。如果不希望A的右边有任何文字或者图像紧贴,可以使用clear:right 属性 同理B也是这样的。
相对于 <div style= "clear:both "> C </div> 这个容器对象来说,不希望C文本嵌入到AB之间,那么可以两边清除,另开一个新的块

具体信息可以参考xhtml手册了
<div style= "clear:both "> </div> 这个还可以用来撑高父容器自适应高度了。