I came across this really interesting thing. Was messing around with floats and clearfix. I have a section (container) which contains 3 left floated div boxes and to avoid container collapsing, I use clearfix method on it. Like that one before and after, empty content, display block and clear both. Nothing special. Now, to see how this clearfix behaves with margin on top and bottom, I created a div box on top, outside container. Container has both margin top and bottom of 50px, so it was working great. But oddly, when I tried to float a box on top outside container, the box became contained inside container respectfully to childs of the container. I find this weird, coz that box wasn't inside container tag, it was outside. I understand that floated elements are removed from normal document flow, so container margin-top couldn't relay on div box any longer since it's removed from document flow and the only element to rely on was body left. But my question is: Why did orange box became contained inside brown container if orange box is not its child?
I mean orange box could have been moved to any other place oddly, but not contained so nicely inside container when it's not even a child of container, they are siblings. What's really happening here?
Code is basic:
<body>
<div id="box1"></div>
<section class="clearfix">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</section>
<div id="box"></div>
</body>
.clearfix:before,
.clearfix:after {
content: "";
display: block;
clear: both;
}
#box {
width: 300px;
height: 100px;
background: blue;
}
#box1 {
width: 300px;
height: 50px;
background: orange;
float: right;
}