日期:2014-05-16  浏览次数:20707 次

CSS布局float问题
3个div, 把 前两个设置为 float:left , 最后一个不设置浮动属性。 
为什么显示的效果是第三个div的框架套覆盖在第一个div上,而第三个div的内容却没有覆盖第一个div上?




<style>
  div { width:100px; height:100px;border:1px solid black;}
  #first, #second { float:left; }
  #third  {border:4px solid red;}
</style>


<div id='first'> first</div>
<div id='second'> second</div>
<div id='third'> third</div>

div css float?

------解决方案--------------------
因为脱离了文档流,也就脱离了正常的顺序
------解决方案--------------------
虽然first和second都是浮动的,third不是浮动的,但是first和second会占third显示内容的地方,你把third的宽设成大于200的数,或者把高设成大于100的数试试