Why the CSS's overflow property clear float? - html

Question

I tried the next code:
div.a {
position: relative;
width: auto;
height: auto;
border: 3px solid #73AD21;
}
div.b {
float: right;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
<div class="a">The outer box;
<div class="b">The inner box</div>
</div>
But for some reason, when I use float instead of another way of positioning, then the outer box become to be with small height, and the inner box flows out of the outer box.
When I asked my friend, then he told me to add the property overflow: hidden; to the outer box.
It worked, and the outer box streched enough to contain the inner box.
When I learned about this property, I learned that the porpose of this, is to show\disappear etc scroll bar.
Somebosy can please explain me the aother thing about overflow I didnt understood?

Answer 1

Quoting from Block formatting contexts
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.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
According to the above quoted text and what I understand,
overflow:hidden causes a new float context, which clears the float from the child elements which are floating. Hence the parent auto adjusts.
It would be similar to clearing the parent like this:
#parent:after {
content: "";
display:table;
clear: both;
}
Example with manual clearing the parent:
div.a {
position: relative;
width: auto;
height: auto;
border: 3px solid #73AD21;
}
div.b {
float: right;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
div.a:after {
content: "";
display: table;
clear: both;
}
<div class="a">The outer box;
<div class="b">The inner box</div>
</div>

Answer 2

You are using float but not clearing. Use following code it will works
First Option
<div class="a">The outer box;
<div class="b">The inner box</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
div.a {
position: relative;
width: auto;
height: auto;
border: 3px solid #73AD21;
}
div.b {
float: right;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
.clear {
clear:both;
}
Second Option
<div class="a">The outer box;
<div class="b">The inner box</div>
</div>
div.a {
position: relative;
width: auto;
height: auto;
border: 3px solid #73AD21;
}
div.b {
float: right;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
div.a:after,div.b:after {
content"";
display:block;
clear:both;
}