亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

為什么設置width:100%;overflow:hidden能清除浮動呢?

嚴格來說,是只有在p的寬度加上兩個div的寬度大于瀏覽器的寬度時才會清除浮動影響,100%的寬度+兩個div的寬度是沒問題的,甚至小一點90%都可以,具體可以多小是要看兩個div的寬度加上去為準的。但如果你設置固定寬度為100px的話,是不可能換行的,也就是不能清除浮動的影響的,因為這明顯小于瀏覽器的寬度,設置overflow:hidden是為了溢出時隱藏的,這里看來,我的理解是文字不能超出這個范圍,因為設置了寬度,如果寬度不夠大的話會自動換行,這時候就和正常的p是一樣的,所以才需要兩個值都設置,而且你要注意固定寬度的值

正在回答

4 回答

對于這個問題我的理解是這樣的

  1. 設置了overflow:hidden的p元素會觸發 BFC規則(注),即把p元素塊級格式化了,使其成為塊級元素。?

  2. 塊級元素特點之一是獨占一行,因此p元素就移到了下一行,間接達成了清除前面元素浮動的效果。

注:找到的一篇對于BFC概念講得比較清除的文章,供參考。

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

1 回復 有任何疑惑可以回復我~
#1

慕粉4257757

回答有誤, 最明顯的錯誤就是:一般瀏覽器下p元素默認display:block。也就是p元素默認就是塊級元素,不是觸發bfs才使得p成為塊元素。
2016-10-28 回復 有任何疑惑可以回復我~
#2

暮女神

thanks
2017-07-15 回復 有任何疑惑可以回復我~

應該是這樣:

  1. <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)只不過是為了形成“換行”而已


0 回復 有任何疑惑可以回復我~

p元素不是本來就是塊級元素嗎

0 回復 有任何疑惑可以回復我~

樓上,百度的,不準。。。。
建議知乎,觀摩 ? 饃大大人的回答。

1 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
網頁布局基礎
  • 參與學習       214678    人
  • 解答問題       1833    個

讓你精通CSS中三大定位機制,徹底掌握網頁布局的相關知識

進入課程

為什么設置width:100%;overflow:hidden能清除浮動呢?

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號