浮動(dòng)會(huì)導(dǎo)致什么結(jié)果?怎么清除浮動(dòng)?

DevYK 發(fā)布于2019-08-30 15:56 / 1803人閱讀

摘要：首先看一段代碼原本想象的效果是這樣子結(jié)果是這個(gè)樣子為什么的高度為了呢是因?yàn)閷?dǎo)致的高度折疊，即元素的上下底邊重合，也就是出現(xiàn)高度為的情況這種情況為導(dǎo)致以下結(jié)果因?yàn)楦?dòng)脫離文檔流導(dǎo)致高度為這時(shí)在后面添加一個(gè)自然是在下面但由于的高度為所

首先看一段代碼:

HTML:

CSS:

.container, #div1, #div2 {
    border: 1px solid;
}

.container {
    width: 100%;
}

#div1 {
    float: left;
    width: 200px;
    height: 200px;
    background-color: blueviolet;
}

原本想象的效果是這樣子:

結(jié)果是這個(gè)樣子:

為什么div.container的高度為0了呢?是因?yàn)閒loat導(dǎo)致的高度折疊，即元素的上下底邊重合，也就是出現(xiàn)高度為0的情況.這種情況為導(dǎo)致以下結(jié)果:

因?yàn)?div1浮動(dòng),脫離文檔流導(dǎo)致div.container高度為0,這時(shí)在div.container后面添加一個(gè)div.box自然是在div.container下面.但由于div.container的高度為0,所以出現(xiàn)的效果是#div1會(huì)覆蓋div.box.

但怎么解決這個(gè)問(wèn)題呢,第一種方法可以是這樣:

CSS:

.container::before, .container::after {
    content: "";
    display: block;
    clear: both;
}

給div.container添加偽元素,讓其清除左右浮動(dòng),便可解決這個(gè)問(wèn)題,效果如下:

第二種方法可以給div.container添加overflow: hidden;

CSS:

.container {
    width: 100%;
    overflow: hidden;
}

為什么overflow: hidden可以清除浮動(dòng)呢?其實(shí)是我們添加overflow時(shí)創(chuàng)建了BFC(塊級(jí)格式化上下文).
一個(gè)BFC可以被顯示觸發(fā),只需滿足一下條件之一:

1.float 的值不為 none;
2.overflow 的值不為 visible;
3.position 的值為 fixed/absolute;
4.display 的值為 table-cell/table-caption/inline-block/flex/inline-flex.

在計(jì)算BFC高度時(shí),浮動(dòng)元素高度也參與計(jì)算,因此div.container在計(jì)算高度時(shí)也把#div1的高度計(jì)算在內(nèi),因此會(huì)出現(xiàn)這種"清除浮動(dòng)"的效果,把#div1包含在內(nèi).

GPU云服務(wù)器云服務(wù)器清除浮動(dòng) 什么原因會(huì)導(dǎo)致云計(jì)算故障在html中怎么浮動(dòng) java左浮動(dòng)怎么寫

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

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

相關(guān)文章

浮動(dòng)會(huì)導(dǎo)致什么結(jié)果?怎么清除浮動(dòng)?

摘要：首先看一段代碼原本想象的效果是這樣子結(jié)果是這個(gè)樣子為什么的高度為了呢是因?yàn)閷?dǎo)致的高度折疊，即元素的上下底邊重合，也就是出現(xiàn)高度為的情況這種情況為導(dǎo)致以下結(jié)果因?yàn)楦?dòng)脫離文檔流導(dǎo)致高度為這時(shí)在后面添加一個(gè)自然是在下面但由于的高度為所首先看一段代碼: HTML: CSS: .container, #div1, #div2 { border: 1px so...

i_garfileo 2019-08-02 14:27 評(píng)論0 收藏0
你從來(lái)沒(méi)了解過(guò)的CSS浮動(dòng) | Design Shack

摘要：另一種元素是內(nèi)聯(lián)元素，它們會(huì)與之前的內(nèi)容保持顯示在一行。即使圖片是內(nèi)聯(lián)元素，它們也被它們的父塊級(jí)元素列表項(xiàng)控制。當(dāng)一行中多個(gè)元素被浮動(dòng)，它們會(huì)產(chǎn)生同內(nèi)聯(lián)元素的流類似的效果。浮動(dòng)元素不能高過(guò)前一行內(nèi)聯(lián)元素。浮動(dòng)到底是做什么呢？他們是如何影響相關(guān)元素的盒模型的呢？浮動(dòng)的元素與內(nèi)聯(lián)元素有什么不同呢？制定浮動(dòng)元素的位置的具體規(guī)則是什么？clear屬性是如何工作的，并且它的作用是什么？即使是...

XGBCCC 2019-08-02 16:13 評(píng)論0 收藏0
你從來(lái)沒(méi)了解過(guò)的CSS浮動(dòng) | Design Shack

摘要：另一種元素是內(nèi)聯(lián)元素，它們會(huì)與之前的內(nèi)容保持顯示在一行。即使圖片是內(nèi)聯(lián)元素，它們也被它們的父塊級(jí)元素列表項(xiàng)控制。當(dāng)一行中多個(gè)元素被浮動(dòng)，它們會(huì)產(chǎn)生同內(nèi)聯(lián)元素的流類似的效果。浮動(dòng)元素不能高過(guò)前一行內(nèi)聯(lián)元素。浮動(dòng)到底是做什么呢？他們是如何影響相關(guān)元素的盒模型的呢？浮動(dòng)的元素與內(nèi)聯(lián)元素有什么不同呢？制定浮動(dòng)元素的位置的具體規(guī)則是什么？clear屬性是如何工作的，并且它的作用是什么？即使是...

BicycleWarrior 2019-08-29 18:40 評(píng)論0 收藏0
[譯]HTML&CSS Lesson5: 定位

摘要：浮動(dòng)定位的其中一種方法就是使用屬性。例如，是一個(gè)內(nèi)聯(lián)元素，它默認(rèn)的值為和值是不生效的。然而，如果我們將這個(gè)內(nèi)聯(lián)元素設(shè)置為浮動(dòng)，那么它的默認(rèn)值會(huì)變成這時(shí)候和值就生效了。包裹元素就是將浮動(dòng)元素置于父元素中，父元素作為容器會(huì)置于正常的文件流中。 CSS最大的用處之一就是可以將內(nèi)容和元素定位到任何我們想要的位置，使我們的設(shè)計(jì)具有結(jié)構(gòu)，使內(nèi)容更加易懂。 CSS有好幾種不同的定位屬性，每種都有自己...

YorkChen 2019-08-01 17:39 評(píng)論0 收藏0
[譯]HTML&CSS Lesson5: 定位

摘要：浮動(dòng)定位的其中一種方法就是使用屬性。例如，是一個(gè)內(nèi)聯(lián)元素，它默認(rèn)的值為和值是不生效的。然而，如果我們將這個(gè)內(nèi)聯(lián)元素設(shè)置為浮動(dòng)，那么它的默認(rèn)值會(huì)變成這時(shí)候和值就生效了。包裹元素就是將浮動(dòng)元素置于父元素中，父元素作為容器會(huì)置于正常的文件流中。 CSS最大的用處之一就是可以將內(nèi)容和元素定位到任何我們想要的位置，使我們的設(shè)計(jì)具有結(jié)構(gòu)，使內(nèi)容更加易懂。 CSS有好幾種不同的定位屬性，每種都有自己...

_Dreams 2019-08-29 13:29 評(píng)論0 收藏0