首頁  >  文章  >  web前端  >  如何解決子div設定float後會導致父div無法自動撐開的問題

如何解決子div設定float後會導致父div無法自動撐開的問題

不言
不言原創
2018-07-25 09:41:472547瀏覽

本篇文章分享給大家的內容是關於子div設定float後會導致父div無法自動撐開,內容很詳細,接下來我們就來看看具體的內容,希望可以幫助大家。

原因:內部的p因為float:left之後,就遺失了clear:both和display:block的樣式,所以外在的p不會被撐開。

以下是幾個解決方法(假設父p的class為「container」):

  • 方法1、使用偽類別

#
container::after{
    display: block;
    height:0;
    content: '';
    clear: both;
}
container{
    display: inline-block; /*第一种撑开办法,底下会有部分被遮到,所以添加这行,就完美了*/
}
  • 方法2、不撐開的原理是overflow不可見,所以給父p加上overflow:auto;就行,IE要用_height:1%;

#
container{
    overflow: auto;/*让主要内容区随内容自动撑开*/
    overflow-y:hidden;/*把出现的滚动条隐藏,但是底下会被遮到一点,不完美*/
     _height:1%;/*对IE的hack*/
}
  • 方法3、可以專門最後加上一個子p用來清除浮動:5394d62b37c0d1016baca90bf99fbfbf94b3e26ee717c64999d7867364b1b4a3
    設定樣式.clear{clear:both; font-size:0; height:1%;}

  • 方法4、可以設定父p的高度(也就是手動撐開,不靈活);

  • #方法5、直接給父p設定display: inline-block; 這樣也自動撐開

  • 方法6、直接給子p設定display: inline-block; 也能自動撐開,但是排版問題有待研究學習

  • 方法7、從網路上也發現了一個方法,增加父p屬性:display:table;

  • 方法8、子p浮動我就套不住你?OK,我讓父p也浮動: 父p設定float: left; 也可以

## 相關推薦:

tinymce與prism實現高亮的程式碼以及漢化的配置方法過程

如何動態產生html元素以及為元素追加屬性的方法介紹(附程式碼)

以上是如何解決子div設定float後會導致父div無法自動撐開的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn