In CSS, how does overflow interact with float? - css

Question

I'm confused by the interaction I'm seeing between the overflow property on an element and float on a sibling element. Consider the following:
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 {
border: 1px solid red;
width: 50px;
height: 150px;
}
<h2>Without clear</h2>
<div class="container">
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
</div>
(This example was adapted from this example on w3schools: https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clear
In this case, dev1 floats to the left of div2, and is within the box for div2 — e.g., the border for div2 extends above and to the left of div1, but the text content of div2 wraps around div1. But also note: because of the width/height set on div2, the text in div2 overflows below.
Now, add overflow:hidden; to div2:
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 {
border: 1px solid red;
width: 50px;
height: 150px;
overflow: hidden;
}
<h2>Without clear</h2>
<div class="container">
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
</div>
Now div2 is entirely to the right of div1 — it's border no longer extends around div1.
Why does adding the overflow:hidden property to div2 change its layout interaction wtih div1 in this way? (Same effect also happens for overflow:auto or overflow:scroll.)

Answer 1

You need to consider the concept of Block formatting contexts where you can read the following:
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.
So when adding overflow:hidden, the div2 will establish a new BFC then we can read:
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 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 ref
To make it easy, when an element create a BFC its content will no more interact with the outside world. From the MDN you can read:
Setting overflow: auto created a new BFC containing the float. Our <div> now becomes a mini-layout inside our layout. Any child element will be contained inside it.