“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
我的理解：設定了over:hidden;后，浮動的塊不重疊了，而是相鄰的關系，又因為width=100%，所以它需要的寬度是整個一行，所以只能夠靠換行來實現，這相當于清除浮動。
也不知道理解的對不對呢。
2016-10-28
重發一遍。
? 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
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，其中的內容與不在一個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