子Div使用Float后如何撐開父Div

一個Div包含了多個子Div,并且子Div使用了浮動后,父Div確不能被撐開,如下圖:



部分代碼如下:

<style>
  #div1{border:1px solid red;float:left;}
  #div2,#div3{float:right;border:1px solid blue;}
</style>

<div id="div1">
  <div id="div2">two</div>
  <div id="div3">one</div>
</div>

如果想要撐開父元素可以采用以下方法:
方法一:父元素設置overflow以及zoom,樣式如下:

<style>
 #div1{border:1px solid red;overflow:hidden;zoom:1;}
  #div2,#div3{float:right;border:1px solid blue;}
</style>

方法二:父元素也是設置浮動效果,樣式如下:

 <style>
#div1{border:1px solid red;float:left;}
 #div2,#div3{float:right;border:1px solid blue;}
</style>

此方法有個缺陷是,父元素的寬度需要設置。

方法三:在添加一個子元素,并設置clear樣式:

<div id="div1">
<div id="div2">two</div>
<div id="div3">one</div>
<div style="clear:both"></div>
</div>

此方法添加了一個div元素,有些情況下可能這個div會影響元素的遍歷。

以上方法 使用doctype html 4.0 以及 doctype xhtml 1.0 的 Transitional 在FF IE6 IE7 IE8 Chrome Safari下測試通過,其他瀏覽器沒有測試。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,801評論 1 92
  • 前端開發面試知識點大綱: HTML&CSS: 對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功:...
    秀才JaneBook閱讀 2,539評論 0 25
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,621評論 32 459
  • <a name='html'>HTML</a> Doctype作用?標準模式與兼容模式各有什么區別? (1)、<...
    clark124閱讀 3,554評論 1 19
  • 20160718 我:我愛你! 小暖男:媽媽不要愛畢畢! 我:媽媽愛畢畢,你愛媽媽嗎? 小曖男:畢畢不要愛媽媽! ...
    米勒Li閱讀 380評論 0 0