堆棧內存溢出
  簡體   English   中英

如果容器元素包含浮動元素，為什么它的高度不會增加？

[英]Why doesn't the height of a container element increase if it contains floated elements?

 原文  2013-05-15 14:49:41  8   7    html/ css/ css-float

問題描述

我想問一下高度和浮動是如何工作的。 我有一個外部 div 和一個包含內容的內部 div。 它的高度可能會因內部 div 的內容而異，但似乎我的內部 div 會溢出其外部 div。 什么是正確的方法呢？ 

 <html> <body> <div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange"> <div style="width:500px; height:200px; background-color:black; float:right"></div> </div> </body> </html>

7 個解決方案

解決方案1
 611 已采納  2013-05-15 14:59:26

浮動元素不會增加容器元素的高度，因此如果不清除它們，容器高度不會增加......

我將直觀地向您展示：

在此處輸入圖片說明

在此處輸入圖片說明

在此處輸入圖片說明

更多解釋：

<div>
  <div style="float: left;"></div>
  <div style="width: 15px;"></div> <!-- This will shift 
                                        besides the top div. Why? Because of the top div 
                                        is floated left, making the 
                                        rest of the space blank -->

  <div style="clear: both;"></div> 
  <!-- Now in order to prevent the next div from floating beside the top ones, 
       we use `clear: both;`. This is like a wall, so now none of the div's 
       will be floated after this point. The container height will now also include the 
       height of these floated divs -->
  <div></div>
</div>

您還可以添加overflow: hidden; 在容器元素上，但我建議您使用clear: both; 反而。

此外，如果您可能想自行清除可以使用的元素

.self_clear:after {
  content: "";
  clear: both;
  display: table;
}

CSS 浮動是如何工作的？

什么是浮動，它有什么作用？

  • 大多數初學者都誤解了float屬性。 那么， float到底是做什么的呢？ 最初，引入了float屬性以在圖像周圍流動文本，圖像left或right浮動。 這是@Madara Uchicha 的另一種解釋。

    那么，使用float屬性並排放置盒子是錯誤的嗎？ 答案是否定的； 如果您使用float屬性來並排設置框，則沒有問題。

  • 浮動inline或block級元素將使元素表現得像inline-block元素。

    演示

  • 如果你浮動一個元素left或right ，元素的width將被限制為它所包含的內容，除非明確定義了width ......

  • 您不能float元素center 。 這是我在初學者中經常看到的最大問題，使用float: center; ，這不是float屬性的有效值。 float通常用於將內容float /移動到最左邊或最右邊。 float屬性只有四個有效值，即left 、 right 、 none （默認）和inherit 。

  • 父元素折疊，當它包含浮動的子元素時，為了防止這種情況，我們使用clear: both; 屬性，清除兩邊浮動的元素，防止父元素折疊。 有關更多信息，您可以在此處參考我的另一個答案。

  • （重要）想想我們有一堆不同的元素。 當我們使用float: left; 或float: right; 元素在堆棧上方移動一個。 因此，普通文檔流中的元素將隱藏在浮動元素后面，因為它位於普通浮動元素之上的堆棧級別。 （請不要將其與z-index聯系起來，因為那是完全不同的。）

以一個案例為例來解釋CSS浮動是如何工作的，假設我們需要一個簡單的2列布局，一個頁眉、頁腳和2列，那么這里是藍圖的樣子……

在此處輸入圖片說明

在上面的例子中，我們將浮動只有紅色箱子，要么你可以float同時向left ，也可以float到left ，另一個right為好，取決於布局，如果是3列，你可能left float 2 列，而另一列right取決於，盡管在此示例中，我們有一個簡化的 2 列布局，因此將left float一列， right float另一列。

用於創建布局的標記和樣式進一步解釋...

<div class="main_wrap">
    <header>Header</header>
    <div class="wrapper clear">
        <div class="floated_left">
            This<br />
            is<br />
            just<br />
            a<br />
            left<br />
            floated<br />
            column<br />
        </div>
        <div class="floated_right">
            This<br />
            is<br />
            just<br />
            a<br />
            right<br />
            floated<br />
            column<br />
        </div>
    </div>
    <footer>Footer</footer>
</div>

* {
    -moz-box-sizing: border-box;       /* Just for demo purpose */
    -webkkit-box-sizing: border-box;   /* Just for demo purpose */
    box-sizing: border-box;            /* Just for demo purpose */
    margin: 0;
    padding: 0;
}

.main_wrap {
    margin: 20px;
    border: 3px solid black;
    width: 520px;
}

header, footer {
    height: 50px;
    border: 3px solid silver;
    text-align: center;
    line-height: 50px;
}

.wrapper {
    border: 3px solid green;
}

.floated_left {
    float: left;
    width: 200px;
    border: 3px solid red;
}

.floated_right {
    float: right;
    width: 300px;
    border: 3px solid red;
}

.clear:after {
    clear: both;
    content: "";
    display: table;
}

讓我們一步一步地進行布局，看看浮動是如何工作的。

首先，我們使用主包裝元素，你可以假設它是你的視口，然后我們使用header並指定50px的height ，所以沒有什么特別的。 它只是一個普通的非浮動塊級元素，它將占據100%水平空間，除非它是浮動的或者我們為它分配inline-block 。

float的第一個有效值被left因此在我們的示例中，我們使用float: left; 對於.floated_left ，所以我們打算在容器元素的left浮動一個塊。

列向左浮動

是的，如果您看到父元素.wrapper已折疊，您看到的帶有綠色邊框的元素沒有展開，但應該對嗎？ 稍后會回到那個，現在，我們有一個列浮動到left 。

來到第二列，讓它right float

另一列向右浮動

在這里，我們有一個300px寬列，我們float在right ，因為它漂浮到這將坐在第一欄旁邊left ，和因為它是浮動到left ，它創建的空墨槽到right ，並且因為有充足right的空間，我們right浮動元素完美地坐在left旁邊。

盡管如此，父元素還是折疊了，好吧，讓我們現在解決這個問題。 有很多方法可以防止父元素折疊。

  • 添加一個空的塊級元素並使用clear: both; 在父元素結束之前，它包含浮動元素，現在這是一種clear浮動元素的廉價解決方案，它將為您完成這項工作，但我建議不要使用它。

在.wrapper div結束之前添加<div style="clear: both;"></div> ，例如

<div class="wrapper clear">
    <!-- Floated columns -->
    <div style="clear: both;"></div>
</div>

演示

嗯，這修復得很好，不再有折疊的父級，但它向 DOM 添加了不必要的標記，所以有些人建議使用overflow: hidden; 在包含按預期工作的浮動子元素的父元素上。

使用overflow: hidden; 在.wrapper

.wrapper {
    border: 3px solid green;
    overflow: hidden;
}

演示

每次我們需要clear float時，這都為我們節省了一個元素，但是當我用這個測試了各種情況時，它在一個特定的情況下失敗了，它在子元素上使用box-shadow 。

Demo （4邊都看不到陰影， overflow: hidden;導致這個問題）

所以現在怎么辦？ 保存一個元素，沒有overflow: hidden; 所以去一個明確的修復黑客，在你的 CSS 中使用下面的代碼片段，就像你使用overflow: hidden; 對於父元素，在父元素上調用下面的class來自我清除。

.clear:after {
    clear: both;
    content: "";
    display: table;
}

<div class="wrapper clear">
    <!-- Floated Elements -->
</div>

演示

在這里，陰影按預期工作，而且它會自動清除防止折疊的父元素。

最后，我們在clear浮動元素后使用頁腳。

演示

什么時候float: none; 無論如何使用，因為它是默認值，所以任何用於聲明float: none; ?

好吧，這取決於，如果您要進行響應式設計，當您希望浮動元素以特定分辨率呈現在另一個下方時，您將多次使用此值。 對於那個float: none; 財產在那里扮演着重要的角色。

很少有真實世界的例子說明float是如何有用的。

  • 我們已經看到的第一個示例是創建一個或多個列布局。
  • 使用img在p內部浮動，這將使我們的內容能夠四處流動。

演示（無浮動img ）

Demo 2 （ img left浮動）

  • 使用float創建水平菜單 -演示

也浮動第二個元素，或使用 `margin`

最后但並非最不重要的一點，我想解釋一下這種特殊情況，即您只left float單個元素，但不float另一個元素，那么會發生什么？

假設我們移除float: right; 從我們的.floated_right class ， div將從最left呈現，因為它沒有浮動。

演示

因此，在這種情況下，您也可以left float

或者

您可以使用margin-left ，它等於左側浮動列的大小，即200px寬。

解決方案2
 41  2013-05-15 14:54:53

您需要將overflow:auto添加到您的父 div 以使其包含內部浮動 div：

<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange;overflow:auto">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

jsFiddle 示例

解決方案3
 11  2013-05-15 15:06:56

您遇到了浮動錯誤（盡管由於有多少瀏覽器表現出這種行為，我不確定它在技術上是否是錯誤）。 這是正在發生的事情：

一般情況下，假設沒有設置明確的高度，div等塊級元素會根據其內容來設置高度。 父 div 的底部將超出最后一個元素。 不幸的是，浮動元素會阻止父元素在確定其高度時考慮浮動元素。 這意味着如果你的最后一個元素是浮動的，它不會像普通元素那樣“拉伸”父元素。

清算

有兩種常見的方法可以解決這個問題。 首先是添加一個“清算”元素； 也就是說，浮動元素下方的另一個元素將迫使父元素拉伸。 所以添加以下 html 作為最后一個孩子：

<div style="clear:both"></div>

它不應該是可見的，並且通過使用 clear:both，您可以確保它不會位於浮動元素旁邊，而是位於它之后。

溢出：

大多數人（我認為）首選的第二種方法是更改​​父元素的 CSS，這樣溢出就不會“可見”。 因此，將溢出設置為“隱藏”將迫使父級超出浮動子級的底部。 當然，這僅在您尚未為父級設置高度時才適用。

就像我說的，第二種方法是首選，因為它不需要你去添加語義無意義的元素到你的標記，但有時你需要overflow可見，在這種情況下，添加一個清除元素不僅僅是可以接受。

解決方案4
 4  2013-05-15 14:55:52

這是因為 div 的浮動。 添加overflow: hidden在外部元素上。

<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

演示

解決方案5
 3  2013-05-15 15:07:10

當有浮動元素時，您會混淆瀏覽器如何呈現元素。 如果一個塊元素是浮動的（在您的情況下是您的內部 div），其他塊元素將忽略它，因為瀏覽器會從網頁的正常流程中刪除浮動元素。 然后，因為浮動 div 已從正常流中移除，所以外部 div 被填充，就像內部 div 不在那里一樣。 但是，內聯元素（圖像、鏈接、文本、黑色引號）將遵守浮動元素的邊界。 如果在外部 div 中引入文本，則文本將放置在內部 div 的周圍。

換句話說，塊元素（標題、段落、div 等）忽略浮動元素並填充，而內聯元素（圖像、鏈接、文本等）尊重浮動元素的邊界。

這里有一個小提琴示例

<body>
    <div style="float:right; background-color:blue;width:200px;min-height:400px;margin-right:20px">
           floating element
    </div>
    <h1 style="background-color:red;"> this is a big header</h1>
    <p style="background-color:green"> this is a parragraph with text and a big image. The text places arrounds the floating element. Because of the image is wider than space between paragrah and floating element places down the floating element. Try to make wider the viewport and see what happens :D
        <img src="http://2.bp.blogspot.com/_nKxzQGcCLtQ/TBYPAJ6xM4I/AAAAAAAAAC8/lG6XemOXosU/s1600/css.png">
     </p>

解決方案6
 3  2018-01-07 15:21:42

試試這個

.parent_div{
    display: flex;
}

解決方案7
 1  2014-12-23 09:50:47

如果沒有任何 div 顯示在容器上，則可以對容器 div 使用溢出屬性，例如：

<div class="cointainer">
    <div class="one">Content One</div>
    <div class="two">Content Two</div>
</div>

這是以下css：

.container{
    width:100%;/* As per your requirment */
    height:auto;
    float:left;
    overflow:hidden;
}
.one{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

.two{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

- - - - - - - - - - - -或者 - - - - - - - - - - - - - ----

    <div class="cointainer">
        <div class="one">Content One</div>
        <div class="two">Content Two</div>
        <div class="clearfix"></div>
    </div>

這是以下css：

    .container{
        width:100%;/* As per your requirment */
        height:auto;
        float:left;
        overflow:hidden;
    }
    .one{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }

    .two{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
    }
    .clearfix:after{
        clear: both;
    }

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 溢出：隱藏的容器不包含浮動的相鄰元素 為什么在偽元素之前無法獲得100％的容器高度？ 為什么將動態內容添加到外部容器時內部元素的寬度不會增加 增加浮動元素的保證金 無法在浮動元素上設置高度100％ 為什么在具有居中元素的同一容器中，元素需要在左前方浮動？ 垂直對齊在浮動元素上不起作用 高度100％的浮動元素 浮動元素的動態高度 調整浮動元素的高度
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM