為什么設置width:100%;overflow:hidden能清除浮動呢?
嚴格來說,是只有在p的寬度加上兩個div的寬度大于瀏覽器的寬度時才會清除浮動影響,100%的寬度+兩個div的寬度是沒問題的,甚至小一點90%都可以,具體可以多小是要看兩個div的寬度加上去為準的。但如果你設置固定寬度為100px的話,是不可能換行的,也就是不能清除浮動的影響的,因為這明顯小于瀏覽器的寬度,設置overflow:hidden是為了溢出時隱藏的,這里看來,我的理解是文字不能超出這個范圍,因為設置了寬度,如果寬度不夠大的話會自動換行,這時候就和正常的p是一樣的,所以才需要兩個值都設置,而且你要注意固定寬度的值
2016-08-10
對于這個問題我的理解是這樣的
設置了overflow:hidden的p元素會觸發 BFC規則(注),即把p元素塊級格式化了,使其成為塊級元素。?
塊級元素特點之一是獨占一行,因此p元素就移到了下一行,間接達成了清除前面元素浮動的效果。
注:找到的一篇對于BFC概念講得比較清除的文章,供參考。
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
2016-10-28
應該是這樣:
<p>設置overflow:hidden觸發BFC。
“Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.”
--https://www.w3.org/TR/CSS21/visuren.html#img-inline-layout
? ?2.p作為block container box,其中的內容與不在一個BFC的float元素是互不影響的。按理說,這樣就已經能夠保證p中inline-level的內容不受float元素的影響了
? 3.最后p加入width:100%(注意,這里100%是相對父元素的寬度的計算值Calculated value)只不過是為了形成“換行”而已
2016-09-12
p元素不是本來就是塊級元素嗎
2016-08-10
樓上,百度的,不準。。。。
建議知乎,觀摩 ? 饃大大人的回答。