关于bfc的问题. 应该是bfc

Question

.wraper{width:1200px;margin:0auto;}.left{float:left;}.right{float:right;}.left,.right{width:200px;height:200px;background:red;}ul{overflow:hidden;}这里一个疑问。1.为什么ul的宽会是800px?而不是1200?给ul设置宽为1200px的时候，ul为什么不会换行?overflow不是触发了bfc不会和float重碟吗？3.当子元素含有float的时候，此元素是不是也触发了bfc？

Answer 1

问题1：为什么ul的宽会是800px?而不是1200?
题主已经说了，创建了新的BFC（establishesanewblockformattingcontext）的元素，不会与float重叠，因此。w3c的表述是：
Theborderboxofatable,ablock-levelreplacedelement,oranelementinthenormalflowthatestablishesanewblockformattingcontext(suchasanelementwith'overflow'otherthan'visible')mustnotoverlapthemarginboxofanyfloatsinthesameblockformattingcontextastheelementitself.
其中mustnotoverlap就是说不重叠了，所以ul在width为auto的默认情况下，实际宽度比包含块小。
问题2：给ul设置宽为1200px的时候，ul为什么不会换行?overflow不是触发了bfc不会和float重碟吗？
经测试，在Firefox下不换行。但IE及Chrome下，都会认为空间不足而换行。一般来说，Chrome和Firefox同作为现代浏览器，它们的兼容差异是很少的，像这种有差异的情况，可以认为是w3c尚未详细描述的边缘细节。就这个具体问题来说，如果w3c的mustnotoverlap是字面意思的话，也只是说，目前Chrome和IE对这个地方实现地更正确一些，仅此而已。
问题3：当子元素含有float的时候，此元素是不是也触发了bfc？
建立新的BFC的条件：
视口提供的初始包含块（根元素）
浮动元素
绝对定位元素
display为inline-block、table-cell、table-caption的计算值的元素（行内块、表格标题、单元格）
overflow不为visible的块元素
所以，如果问题里的”元素“是指这个浮动子元素的话，那就是“建立了新的BFC”。
                            

Answer 2

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