爲什麼'float'css屬性會影響父級兄弟分區？

Question

我有這個簡單的html代碼，我想知道爲什麼父兄弟div受浮動css arrtibute的影響。是浮動相對於窗口而不是阻止元素與浮動arrti在？

.floatLeft { 
 
    float:left; 
 
}

<div > 
 
    <img class="floatLeft" src="https://i.stack.imgur.com/xdrQi.jpg?s=48&g=1"/> 
 
    <p>test</p> 
 
</div> 
 
<div> 
 
    <p>test1</p> 
 
</div>

Answer 1

這是因爲父元素崩潰。見The great collapse。

發生這種情況的原因是因爲否則將幾乎沒有辦法將您的文字包裹在圖像中。因此，父級會摺疊到其非浮動內容所需的最小高度，而下一個div只是向上移動，其內容也會尊重圖像的浮動。這樣，您可以輕鬆創建這些類型的文本佈局，否則幾乎不可能。

如果你不希望這樣無論出於何種原因，則可以明確的第二個div，因此它不會旁邊漂浮的形象，有多種方法可以做到這一點，但常見的是使用一個僞元素作爲'clearfix'元素。這個解決方案的優點是你不需要任何額外的標記，除了一個id或class來標識要清除的元素。

在下面的例子中，我剛剛添加了一個CSS代碼片段，它找到第一個div，併爲::after僞元素設置樣式，這就好像您在第一個div的內容之後插入清除的元素。

這將強制第一個div增長到圖像下方，所以第二個div被強制播放。

你可以添加一個類的第一個div來選擇它，但只是就事論事，我用的是選擇div:first-child::after，這樣我就可以離開這個加價的例子完全不變：

.floatLeft { 
 
    float:left; 
 
} 
 

 
div:first-child::after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
}

<div > 
 
    <img class="floatLeft" src="https://i.stack.imgur.com/xdrQi.jpg?s=48&g=1"/> 
 
    <p>test</p> 
 
</div> 
 
<div> 
 
    <p>test1</p> 
 
</div>

有關花車的主題，包括各種方式做明確的修復，見CSS-tricks.com優秀All about floats更多信息。

Answer 2

.floatLeft { 
 
     float:left; 
 
    } 
 
    .clear:after { 
 
     content: ''; 
 
     display: block; 
 
     clear: both; 
 
    }

<div class="clear"> 
 
     <img class="floatLeft" src="https://i.stack.imgur.com/xdrQi.jpg?s=48&g=1"/> 
 
     <p>test</p> 
 
    </div> 
 
    <div> 
 
     <p>test1</p> 
 
    </div>