If the block has overflow: hidden , it rises next to the float, and is not covered by it. Why is that? And how does overflow interact with block allocation?

 section { margin: 1em 0; border: 4px solid burlywood; } section:after { content: ''; display: block; clear: both; } aside { float: left; width: 5em; background: rgba(160, 160, 160, .5); border: 4px dotted red; } div { border: 4px solid blue; } 
 <section> <aside>Float</aside> <div style="overflow: hidden">2</div> </section> <section> <aside>Float</aside> <div style="overflow: visible">2</div> </section>

    1 answer 1

    Wrap rules for float apply within a single block formatting context . Block elements for which overflow has a value other than visible receive a new block formatting context.

    Why this is important can be found in the article " MDN: overflow ".

    This is technically necessary because if the float intersected with the scrolling element, it would require that the contents of the scrollable element be wrapped around the invading floats. The wrapping would be necessary after each step of scrolling again, which would lead to a noticeable slowdown of scrolling.

    In addition, a block formatting context can be created by:

    • root element or something that contains it
    • floats (items whose float not equal to none )
    • absolutely positioned elements (elements whose position value is either absolute or fixed )
    • line blocks (elements with display: inline-block )
    • table cells (elements with display: table-cell , set by default for table cells)
    • table headers (elements with display: table-caption set by default for table headers)
    • elements for which the value of the overflow property differs from visible
    • flex blocks (elements with display: flex or inline-flex )