使用float：left和clear：它們在同一個DIV中是否正確？

在單個DIV中浮動和清理有什麼技術上的不正確嗎？例如，float:left開始框格式上下文，clear:both結束框格式上下文。將兩者都放在一個單獨的DIV中似乎創建了一個獨立的BFC，與overflow:hidden不同。使用float：left和clear：它們在同一個DIV中是否正確？

下面是一個簡單的例子：

.wrapper { 
    width: 50%; 
    float: left; 
    clear: both; 
}

我除了每天的Safari瀏覽器的現代化測試這一點，因爲我沒有一個iPhone得心應手。我也在IE8到11中測試了它。在所有情況下，它都很完美。此外，它在CSS Lint上正確驗證。但我不知道我是否錯過了一些東西。如果這是正確的，如果它適用，爲什麼很多人使用clearfix hack？也許我錯過了一些明顯的東西？

來源

2017-01-30 DR01D

是的，這是正確的。浮動以特殊的方式使元素不在流中，並清除將元素推到之前的浮動元素之下。

這不是clearfix hack的替換，因爲清零的float仍然不在流中，因此父元素不會增長到包含它（除非它建立了塊格式化上下文）。有關更多信息，請參閱Floating elements within a div, floats outside of div. Why?。

div { 
 
    border: 2px solid blue; 
 
    margin-bottom: 50px; 
 
} 
 
span { 
 
    float: left; 
 
    clear: both; 
 
    background: yellow; 
 
} 
 
.clearfix::after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
}

No clearfix: 
 
<div> 
 
    <span>Float</span> 
 
    <span>Float</span> 
 
    Text 
 
</div> 
 
With clearfix: 
 
<div class="clearfix"> 
 
    <span>Float</span> 
 
    <span>Float</span> 
 
    Text 
 
</div>

來源

2017-01-30 17:54:34 Oriol

你可能大膽「前彩車」的一部分。我打賭有人認爲這真的是一個替代品。 – Rob

我正在解剖你的令人驚訝的有用評論[浮動元素內的div，浮動div以外。爲什麼呢？（http://stackoverflow.com/questions/2062258/floating-elements-within-a-div-floats-outside-of-div-why）。我計劃在今天的其餘時間（可能還有很多明天）將Dreamweaver中的示例撕碎。在我繼續之前，我會充分理解這一點。浮動和清除的基本知識很容易，但瞭解根本基礎是令人難以置信的。 – DR01D

使用float：left和clear：它們在同一個DIV中是否正確？

回答

相關問題