“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.
? 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.?
“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.”
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.?
2016-10-25
我的理解:設(shè)定了over:hidden;后,浮動(dòng)的塊不重疊了,而是相鄰的關(guān)系,又因?yàn)閣idth=100%,所以它需要的寬度是整個(gè)一行,所以只能夠靠換行來(lái)實(shí)現(xiàn),這相當(dāng)于清除浮動(dòng)。
也不知道理解的對(duì)不對(duì)呢。
2016-10-28
重發(fā)一遍。
? 1.<p>設(shè)置overflow:hidden觸發(fā)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,其中的內(nèi)容與不在一個(gè)BFC的float元素是互不影響的。按理說(shuō),這樣就已經(jīng)能夠保證p中inline-level的內(nèi)容不受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%是相對(duì)父元素的寬度的計(jì)算值Calculated value)只不過(guò)是為了形成“換行”而已
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? --https://www.w3.org/TR/CSS21/visuren.html#img-inline-layout
2016-10-28
“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,其中的內(nèi)容與不在一個(gè)BFC的float元素是互不影響的。按理說(shuō),這樣就已經(jīng)能夠保證p中inline-level的內(nèi)容不受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%是相對(duì)父元素的寬度的計(jì)算值Calculated value)只不過(guò)是為了形成“換行”而已
????????????????????????????????????????????????????????????????--https://www.w3.org/TR/CSS21/visuren.html#img-inline-layout