本篇文章分享給大家的內容是關於子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中文網其他相關文章!