关于bfc的问题. 应该是bfc
<div class='wraper'>
<div class="left"></div>
<div class="right"></div>
<ul class=''>
<li></li>
<li></li>
<li></li>
</ul>
</div> .wraper{width:1200px;margin:0 auto;}
.left{float:left;}
.right{float:right;}
.left,.right{width:200px;height:200px;background:red;}
ul{overflow:hidden;}这里一个疑问。 1.为什么ul的宽会是800px?而不是1200?
1.给ul设置宽为1200px的时候，ul为什么不会换行?overflow不是触发了bfc不会和float重碟吗？
3.当子元素含有float的时候，此元素是不是也触发了bfc？
写回答
-
IT从业问题1： 为什么ul的宽会是800px?而不是1200?
题主已经说了，创建了新的BFC（establishes a new block formatting context）的元素，不会与float重叠，因此。w3c的表述是：
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.其中must not overlap就是说不重叠了，所以ul在width为auto的默认情况下，实际宽度比包含块小。
问题2：给ul设置宽为1200px的时候，ul为什么不会换行?overflow不是触发了bfc不会和float重碟吗？
经测试，在Firefox下不换行。但IE及Chrome下，都会认为空间不足而换行。一般来说，Chrome和Firefox同作为现代浏览器，它们的兼容差异是很少的，像这种有差异的情况，可以认为是w3c尚未详细描述的边缘细节。就这个具体问题来说，如果w3c的must not overlap是字面意思的话，也只是说，目前Chrome和IE对这个地方实现地更正确一些，仅此而已。
问题3：当子元素含有float的时候，此元素是不是也触发了bfc？
建立新的BFC的条件：
1.视口提供的初始包含块（根元素）
2.浮动元素
3.绝对定位元素
4.display为inline-block、table-cell、table-caption的计算值的元素（行内块、表格标题、单元格）
5.overflow不为visible的块元素
所以，如果问题里的”元素“是指这个浮动子元素的话，那就是“建立了新的BFC”。
2019-07-17 19:27:33赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
