爲什麼這麼說?
因爲這就是浮動的工作原理。
當你把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
標準一樣流出其父元素維度。
我很困惑。我在上面的代碼中沒有圖像。沒有有子段的父母段落。你能澄清一下嗎? – abc
對不起,圖像是我的壞。由元素ID替換以進行澄清。而父母段落的意思是圍繞跨度及其文本內容的段落 - 只有跨度和文本是圍繞第一個元素浮動的_inline_內容。 '#p2'元素被放置在「浮動元素下」 - 再次,移除該特定元素的寬度限制,然後它應該變得清晰。 – CBroe
查看我編輯的附加簡化示例,這應該使其更加清晰。 – CBroe