为什么清除浮动要设置成width:100%呢?
为什么清除浮动要设置成width:100%呢?
为什么清除浮动要设置成width:100%呢?
2016-10-19
重发一遍。
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.
2.p作为block container box,其中的内容与不在一个BFC的float元素是互不影响的。按理说,这样就已经能够保证p中inline-level的内容不受float元素的影响了
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. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3.CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.
3.最后p加入width:100%(注意,这里100%是相对父元素的宽度的计算值Calculated value)只不过是为了形成“换行”而已
--https://www.w3.org/TR/CSS21/visuren.html#img-inline-layout
“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.”
2.p作为block container box,其中的内容与不在一个BFC的float元素是互不影响的。按理说,这样就已经能够保证p中inline-level的内容不受float元素的影响了
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. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3.CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.
3.最后p加入width:100%(注意,这里100%是相对父元素的宽度的计算值Calculated value)只不过是为了形成“换行”而已
--https://www.w3.org/TR/CSS21/visuren.html#img-inline-layout
举报