浮動會導致什么結果?怎么清除浮動?

DevYK 發布于2019-08-30 15:56 / 1789人閱讀

摘要：首先看一段代碼原本想象的效果是這樣子結果是這個樣子為什么的高度為了呢是因為導致的高度折疊，即元素的上下底邊重合，也就是出現高度為的情況這種情況為導致以下結果因為浮動脫離文檔流導致高度為這時在后面添加一個自然是在下面但由于的高度為所

首先看一段代碼:

HTML:

CSS:

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

.container {
    width: 100%;
}

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

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

結果是這個樣子:

為什么div.container的高度為0了呢?是因為float導致的高度折疊，即元素的上下底邊重合，也就是出現高度為0的情況.這種情況為導致以下結果:

因為#div1浮動,脫離文檔流導致div.container高度為0,這時在div.container后面添加一個div.box自然是在div.container下面.但由于div.container的高度為0,所以出現的效果是#div1會覆蓋div.box.

但怎么解決這個問題呢,第一種方法可以是這樣:

CSS:

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

給div.container添加偽元素,讓其清除左右浮動,便可解決這個問題,效果如下:

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

CSS:

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

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

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

在計算BFC高度時,浮動元素高度也參與計算,因此div.container在計算高度時也把#div1的高度計算在內,因此會出現這種"清除浮動"的效果,把#div1包含在內.

云服務器 GPU云服務器清除浮動什么原因會導致云計算故障在html中怎么浮動 java左浮動怎么寫

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

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

浮動會導致什么結果?怎么清除浮動?

摘要：首先看一段代碼原本想象的效果是這樣子結果是這個樣子為什么的高度為了呢是因為導致的高度折疊，即元素的上下底邊重合，也就是出現高度為的情況這種情況為導致以下結果因為浮動脫離文檔流導致高度為這時在后面添加一個自然是在下面但由于的高度為所首先看一段代碼: HTML: CSS: .container, #div1, #div2 { border: 1px so...

i_garfileo 2019-08-02 14:27 評論0 收藏0
你從來沒了解過的CSS浮動 | Design Shack

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

XGBCCC 2019-08-02 16:13 評論0 收藏0
你從來沒了解過的CSS浮動 | Design Shack

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

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

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

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

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

_Dreams 2019-08-29 13:29 評論0 收藏0