为什么设置width:100%;overflow:hidden能清除浮动呢？

严格来说，是只有在p的宽度加上两个div的宽度大于浏览器的宽度时才会清除浮动影响，100%的宽度+两个div的宽度是没问题的，甚至小一点90%都可以，具体可以多小是要看两个div的宽度加上去为准的。但如果你设置固定宽度为100px的话，是不可能换行的，也就是不能清除浮动的影响的，因为这明显小于浏览器的宽度，设置overflow:hidden是为了溢出时隐藏的，这里看来，我的理解是文字不能超出这个范围，因为设置了宽度，如果宽度不够大的话会自动换行，这时候就和正常的p是一样的，所以才需要两个值都设置，而且你要注意固定宽度的值

仰望1992盛夏城厢的蓝天

2016-08-10

源自：网页布局基础 3-2

关注问题我要回答

1089

操作

收起

4 回答

慕容0489628 回答被采纳 +3 积分
2016-08-10

对于这个问题我的理解是这样的

设置了overflow:hidden的p元素会触发 BFC规则(注)，即把p元素块级格式化了，使其成为块级元素。
块级元素特点之一是独占一行，因此p元素就移到了下一行，间接达成了清除前面元素浮动的效果。

注：找到的一篇对于BFC概念讲得比较清除的文章，供参考。

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

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

收起回答

慕粉4257757

回答有误，最明显的错误就是:一般浏览器下p元素默认display：block。也就是p元素默认就是块级元素，不是触发bfs才使得p成为块元素。

2016-10-28 回复有任何疑惑可以回复我~

暮女神

thanks

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

慕粉4257757
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）只不过是为了形成“换行”而已

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

收起回答