Floating elements above clearfixed element

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 an orange box outside the container, the box became contained inside container respectfully to childs of the container. I find this weird, coz that box wasn't inside container's tag, it was outside. I understand that floated elements are removed from normal document flow, so container's margin-top couldn't relay on div box any longer since it's been 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? Before:

After float: right; was applied to orange box:

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;
}

Solution

As you mentioned that you are using float:right on orange box and its going inside other div then yes you have not used clear:both after using float. Point to remember that if you are using clearfix before and after on section won't work. You have to use clear:fix just after floated div or else it will break the flow and will cause issue like you are seeing.

See in demo. I simply use clear:both after floated right div and everything seems fine. To make it more simple, try to clear whenever you use float:right or left and you will not get any problem. If you are getting this with ul li tag still after last li use clear div and you are done. Hope this will help you.