javascript - 关于bfc的问题. 应该是bfc

Question

<p class='wraper'>
        <p class="left"></p>
        <p class="right"></p>
        <ul class=''>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </p>

    .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？

Answer 1

问题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”。

Answer 2

1.float 并没有脱离文档刘 所以 也还是会占有 空间 所以 ul只能是800 因为left 和right 分别是200的宽度
2.给ul设置overflow 只会对子元素出发bfc对他自己本身所在的文档中是没有影响的

Answer 3

1,因为设置overflow:hidden;，生成了BFC，而BFC区域不会与float区域重叠，故ul只能是800px；
2,我设置width:1200px;时，ul是会被挤下来的，具体可看演示
3，当元素有float元素且float不为none时，会触发BFC。

具体参考BFC原理