爲什麼浮動元素與下面的元素重疊，而不是相反？

div { 
 
    background-color: #00FFFF; 
 

 
} 
 
p { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
    margin: 0px; 
 

 
} 
 

 
#p1 { 
 
    background-color: red; 
 
float: left; 
 

 

 
} 
 
#p2 { 
 
    background-color: green; 
 
} 
 
#p3 { 
 
    background-color: orange; 
 
} 
 
#p4 { 
 
    background-color: yellow; 
 
} 
 

 
span { 
 
    position: relative; 
 
} 
 

 
#s1 { 
 
top: 1px; 
 
left: 1px; 
 
} 
 

 
#s2 { 
 
    top: 2px; 
 
left: 2px; 
 

 
} 
 
#s3 { 
 
    top: 3px; 
 
left: 3px; 
 

 
} 
 
#s4 { 
 
    top: 4px; 
 
left: 4px; 
 

 
}

<h1>Floating Elements</h1> 
 

 
<div> 
 
    <p id="p1"><span id="s1">A</span></p> 
 
    <p id="p2"><span id="s2">B</span></p> 
 
    <p id="p3"><span id="s3">C</span></p> 
 
    <p id="p4"><span id="s4">D</span></p> 
 
    <section>This is regular content continuing after the the paragraph boxes.</section> 
 
</div>

來源

2017-05-28 abc

爲什麼這麼說？

因爲這就是浮動的工作原理。

當你把float放在一個元素上時，你實際上並沒有多說這個元素本身應該如何顯示 - 而是應該如何/下面的內容應該如何流動。

更確切地說，以下內嵌內容。

因爲你的段落是塊元素，而你已經固定的寬度和高度，以50像素，這是你得到的結果 - 在#p2款的在線內容並圍繞#p1款流;但父級段落的寬度和高度限制不允許該父級相應地增長。

編輯：
如果你無法理解我所要表達的意思，考慮以下簡單的例子：

#floated { 
 
    float:left; 
 
    width: 50px; 
 
    height: 50px; 
 
    border:1px solid red; 
 
} 
 

 
#unfloated { 
 
    border:1px solid blue; 
 
    background: green; 
 
}

<div id="floated"></div> 
 

 
<div id="unfloated">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>

正如你可以很容易地看到，沒有浮動元素的背景，第二個非浮動div元素在整個寬度上延伸，「在」浮動元素下，並且僅僅其內聯內容Lorem Ipsum文本浮動在浮動元素周圍。

那是如何漂浮的作品。

在您的示例中，您看到「B」顯示在第二個方塊中 - ，因爲該B的父塊元素的寬度和高度限制爲50px，因此它不能增長以包含「B 「，那麼」B「文本就像默認的overflow:visible標準一樣流出其父元素維度。

來源

2017-05-28 18:21:06 CBroe

我很困惑。我在上面的代碼中沒有圖像。沒有有子段的父母段落。你能澄清一下嗎？ – abc

對不起，圖像是我的壞。由元素ID替換以進行澄清。而父母段落的意思是圍繞跨度及其文本內容的段落 - 只有跨度和文本是圍繞第一個元素浮動的_inline_內容。 '＃p2'元素被放置在「浮動元素下」 - 再次，移除該特定元素的寬度限制，然後它應該變得清晰。 – CBroe

查看我編輯的附加簡化示例，這應該使其更加清晰。 – CBroe

從MDN的Stacking and float

對於浮動塊堆疊順序是有點不同。浮動塊放置非定位塊和定位的塊

之間並且它繼續進一步說

如果非定位塊的不透明度（#p2在你的例子）被降低，則發生了一些奇怪的事情：該塊的背景和邊界在浮動塊之上彈出，但仍在定位塊之下。

來源

2017-05-28 18:17:13

對不起，但我的問題不是如何獲得＃p1上的＃p2。 – abc

@abc對此抱歉，有時候人們只是想要一個解決方案，當他們問「爲什麼」，所以我想我會提供一個。我當時不明白爲什麼，但是我深入瞭解它，並且TIL浮動元素的堆棧順序位於非定位元素和定位元素之間，除非非定位元素具有非'1''不透明度' 。如果你添加'＃p2 {opacity：.99; }'，那麼'＃p2'將出現在'＃p1'的頂部。或者顯然你可以根據我先前答覆的結果給它一個「位置」。更新了我的答案。 –

您需要使用clear-fix浮動元素，像後：一個浮動元素後

元素會流向周圍。爲了避免這種情況，使用clear屬性。

CSS Layout - float and clear

div { 
 
    background-color: #00FFFF; 
 

 
} 
 
p { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
    margin: 0px; 
 

 
} 
 

 
#p1 { 
 
    background-color: red; 
 
float: left; 
 

 

 
} 
 
#p2 { 
 
    background-color: green; 
 
} 
 
#p3 { 
 
    background-color: orange; 
 
} 
 
#p4 { 
 
    background-color: yellow; 
 
} 
 

 
span { 
 
    position: relative; 
 
} 
 

 
#s1 { 
 
top: 1px; 
 
left: 1px; 
 
} 
 

 
#s2 { 
 
    top: 2px; 
 
left: 2px; 
 

 
} 
 
#s3 { 
 
    top: 3px; 
 
left: 3px; 
 

 
} 
 
#s4 { 
 
    top: 4px; 
 
left: 4px; 
 

 
} 
 

 
.clear { clear:both; }

<h1>Floating Elements</h1> 
 

 
<div> 
 
    <p id="p1"><span id="s1">A</span></p> 
 
    <div class="clear"></div> 
 
    <p id="p2"><span id="s2">B</span></p> 
 
    <p id="p3"><span id="s3">C</span></p> 
 
    <p id="p4"><span id="s4">D</span></p> 
 
    <section>This is regular content continuing after the the paragraph boxes.</section> 
 
</div>

來源

2017-05-28 18:25:59

失去浮動：左;在＃p1 {}上添加一個位置：relative;到你的div {}和位置：絕對; top：0;左：0;到你的＃p2 {}。不知道你想要達到什麼目的，但是如果你願意保持浮動：left;在＃p1 {}上比你需要清除：both;在p {}上。

來源

2017-05-28 18:50:21

爲什麼浮動元素與下面的元素重疊，而不是相反？

回答

相關問題