子div設(shè)置float后會導(dǎo)致父div無法自動撐開

Dongjie_Liu 發(fā)布于2019-04-23 13:31 / 2094人閱讀

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

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

注: 文章部分轉(zhuǎn)載彩泉 - 博客園

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

以下是幾種解決辦法（假設(shè)父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;/*讓主要內(nèi)容區(qū)隨內(nèi)容自動撐開*/
    overflow-y:hidden;/*把出現(xiàn)的滾動條隱藏，但是底下會被遮到一點，不完美*/
     _height:1%;/*對IE的hack*/
}

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

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

GPU云服務(wù)器云服務(wù)器子Div js清空div子元素 html設(shè)置div jsp設(shè)置div高度

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1984.html

相關(guān)文章

解決高度塌陷問題

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

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

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

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

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

caozhijian 2019-04-23 13:22 評論0 收藏0
前端學(xué)習(xí)筆記（CSS、JS基礎(chǔ)篇）

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

caikeal 2019-08-19 17:57 評論0 收藏0
前端學(xué)習(xí)筆記（CSS、JS基礎(chǔ)篇）

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

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