Under normal circumstances, setting overflow:hidden; to the parent element of the float can clear the float. However, I found that when the parent element of the floated element is the body, setting overflow:hidden to the body cannot clear the float. Some people say The body does not belong to the ordinary stream , so it is invalid. Can anyone explain it?
Thank you: CRIMX
To borrow a sentence from Wang Dalu:
People like you are either great gods, or they are on the road to becoming great gods.
为情所困2017-05-16 13:38:43
这是因为并没有产生新的 BFC
产生新 BFC 的一个条件:
Block-level, non-replaced elements in normal flow when 'overflow' does not compute to 'visible' (except if the 'overflow' property's value has been propagated to the viewport).
为什么对 <body>
设置 overflow
会扩散到 viewport:
UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.