https://jsfiddle.net/0k02qsjw/1/
.left1 {
background-color:red;
width:100px;
height:100px;
float:left;
}
.left2 {
background-color:blue;
width:100px;
height:100px;
}
//left3 left4 similar to left2. fiddle
<div class="left1">Div1</div>
<div class="left2">Div2child</div>
<div class="left3">Div3</div>
<div class="left4">Div4</div>
I'm learning float and clear in css and am stuck on one problem. Float works as expected in the above example when I float each div individually. When I float left1, left2 moves up as expected. But why is it that children on left2 not move up?
I understand that floated elements are out of flow -> may that's why.
If so, why does overflow:hidden on left2 work as if left2 was floated(see below).
https://jsfiddle.net/0k02qsjw/2/
I need help in understanding what is happening in this case. This could be a duplicate of
Floating elements within a div, floats outside of div. Why?
But i don't find any answer to my specific question there.
