子div設置float后會導致父div無法自動撐開

Dongjie_Liu 發布于2019-04-23 13:31 / 2080人閱讀

摘要：本文是從簡書復制的語法可能有些出入想看正版和更多內容請關注簡書小賢筆記注文章部分轉載彩泉博客園原因內部的因為之后，就丟失了和的樣式，所以外部的不會被撐開。

本文是從簡書復制的, markdown語法可能有些出入, 想看"正版"和更多內容請關注簡書: 小賢筆記

注: 文章部分轉載彩泉 - 博客園

原因：內部的DIV因為float:left之后，就丟失了clear:both和display:block的樣式，所以外部的DIV不會被撐開。

以下是幾種解決辦法（假設父div的class為“container”）:

方法1、使用偽類

container::after{
    display: block;
    height:0;
    content: "";
    clear: both;
}
container{
    display: inline-block; /*第一種撐開辦法，底下會有部分被遮到，所以添加這行，就完美了*/
}

方法2、不撐開的原理是overflow不可見，所以給父div添加overflow:auto;就行，IE要用_height:1%;

container{
    overflow: auto;/*讓主要內容區隨內容自動撐開*/
    overflow-y:hidden;/*把出現的滾動條隱藏，但是底下會被遮到一點，不完美*/
     _height:1%;/*對IE的hack*/
}

方法3、可以專門最后添加一個子div用來清除浮動：

設置樣式.clear{clear:both; font-size:0; height:1%;}
方法4、可以設置父div的高度（也就是手動撐開，不靈活）；
方法5、直接給父div設置 display: inline-block; 這樣也自動撐開
方法6、直接給子div設置 display: inline-block; 也能自動撐開，但是排版問題有待研究學習
方法7、從網上還發現了一種方法，給父div增加屬性：display:table;
方法8、子div浮動我就套不住你?OK,我讓父div也浮動: 父div設置 float: left; 也可以

云服務器 GPU云服務器子Div js清空div子元素 html設置div jsp設置div高度

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1984.html

解決高度塌陷問題

摘要：但是當為子元素設置浮動以后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。所謂高度塌陷就是在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。但是當為子元素設置浮動以后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。由于父元素的高度塌陷了，則父元素下的所有元素都會向上移動，這樣將會導致...

zhoutao 2019-04-23 13:11 評論0 收藏0
理解CSS浮動與清除浮動

摘要：那我們舉個栗子當先聲明一個元素向左浮動時，由于脫離文檔流，這個元素的右邊就會空出一片空間，空間的長寬與浮動元素長寬相同。總結總結下來，浮動與清除浮動的順序關系如下設置元素浮動，元素脫離文檔流，不計算高度。本文主要探討兩個問題：為什么CSS設置浮動會引起父元素塌陷為什么設置clear:both能清除浮動，并撐開父元素。起因 CSS的浮動，算是我在寫網頁時用的最多的屬性之一。但...

劉東 2019-08-30 12:45 評論0 收藏0
html+css 布局篇

摘要：做了后有一些不好的影響。設置值不能正確顯示由于浮動導致父級子級之間設置了屬性的值不能正確表達。只有左側設置為，右側設置，右側將會占據整個右側剩余寬度。float 做了float后有一些不好的影響。 1、背景不能顯示由于浮動產生，如果對父級設置了（CSS background背景）CSS背景顏色或CSS背景圖片，而父級不能被撐開，所以導致CSS背景不能顯示。 2、邊框不能撐開如上圖中，如果...

caozhijian 2019-04-23 13:22 評論0 收藏0
前端學習筆記（CSS、JS基礎篇）

摘要：搜索引擎中有一個爬蟲模塊，在頁面中使用諸如等強調式的標簽，有利于，說白了就是有利于被搜索到。定位相對定位不影響元素本身特性不使元素脫離文檔流。定時器如果是由事件控制的，要先關再開，避免多次觸發而混亂。 CSS篇注意：css注釋使用/ /，而不是或者//，否則很容易導致不明錯誤！！！ div padding：內邊距。盒子內容與盒子邊框的距離設置，相當于給盒子加了厚度，使用此屬性后會改...

caikeal 2019-08-19 17:57 評論0 收藏0
前端學習筆記（CSS、JS基礎篇）

摘要：搜索引擎中有一個爬蟲模塊，在頁面中使用諸如等強調式的標簽，有利于，說白了就是有利于被搜索到。定位相對定位不影響元素本身特性不使元素脫離文檔流。定時器如果是由事件控制的，要先關再開，避免多次觸發而混亂。 CSS篇注意：css注釋使用/ /，而不是或者//，否則很容易導致不明錯誤！！！ div padding：內邊距。盒子內容與盒子邊框的距離設置，相當于給盒子加了厚度，使用此屬性后會改...

xietao3 2019-08-30 12:54 評論0 收藏0