意外行爲：左

<div style="float: left; width: 400px; height: 400px; background-color: green;"></div> 
 
<div style="width: 400px; height: 400px; background-color: yellow;">Hello World!</div> 
 
<div style="width: 400px; height: 400px; background-color: blue;"></div>

在上面的例子，我不明白幾件事情：

爲什麼綠色的div堆疊在黃色的頂部DIV？
爲什麼文本"Hello World"打印在藍色div所在的位置，而不是黃色div所在的位置？

我明白float: left;將這個元素推到左邊，並且讓所有下面的元素渲染，就好像什麼都沒發生一樣，同時仍然確認浮動元素所佔用的空間。

所以我預計：綠色div的右側

黃格。
綠色div下的藍色div。
將文字"Hello World"印在黃色的div上。

來源

2017-07-02 Novice

你錯過了一個關鍵點：一個浮動元素後的元素將繞流它 – bhv

這是HTTPS的精確副本：//stackoverflow.com/questions/40264773/understanding-css-float，但我不能拿出任何一個問題的好標題。 – BoltClock

@bhv：這句話很模糊。定義「元素將流動」。 – BoltClock

只有內容是圍繞浮動元素包裹，其他（非在線）元素不...

由於貴黃<div>是塊元素，它不會「環繞」的浮動元素。

添加display: inline-block;到您的黃色元素，如下圖所示：

<div style="float: left; width: 400px; height: 400px; background-color: green;"></div> 
 
<div style="display: inline-block; width: 400px; height: 400px; background-color: yellow;">Hello World!</div> 
 
<div style="width: 400px; height: 400px; background-color: blue;"></div>

來源

2017-07-02 03:47:15

謝謝你的回答。 'p'標籤也是一個塊元素，但是漂浮在周圍。（https://jsfiddle.net/41kdv7zL/） – Novice

不是，它不是浮動的，它只是更大，因爲你沒有指定它的大小... –

順便說一下，只有內容環繞浮動元素，其他（非內聯）元素不... –

意外行爲：左

回答

相關問題