首頁 > web前端 > html教學 > CSS布局float问题_html/css_WEB-ITnose

CSS布局float问题_html/css_WEB-ITnose

WBOY
發布: 2016-06-21 09:47:00
原創
1359 人瀏覽過

div 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的默认背景是透明的,你没有给两个幅度的加入背景,所以就看到了浮动div下面的#third的div。
你加个背景就可以看出来了

#first, #second { float:left; background:#aaa;}

因为脱离了文档流,也就脱离了正常的顺序

虽然first和second都是浮动的,third不是浮动的,但是first和second会占third显示内容的地方,你把third的宽设成大于200的数,或者把高设成大于100的数试试

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板