0

I came across the following code on the Internet.It works but I am not getting the jist of it that is how it is working? All div boxes get inside the container div when a dummy div with clear both property is added at the last otherwise they stay outside the container.Another thing which I got myself is that when clear was set to left it still worked ok.

HTML

<div id="main_container">
 <p>Some content.</p>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div style="clear: both;"></div>
</div>

CSS

#main_container {
 width: 400px;
 margin: 20px auto;
 border: 2px solid #cccccc;
 padding: 5px;
}

.floated_box {
 float: left;
 width: 100px;
 height: 100px;
 border: 1px solid #990000;
 margin: 10px;
}
Naseer
  • 4,041
  • 9
  • 36
  • 72
  • 2
    http://stackoverflow.com/questions/12871710/why-clear-both-css ♦ http://stackoverflow.com/questions/1012131/what-is-the-use-of-style-clearboth – Hashem Qolami Oct 19 '14 at 18:06
  • Seems pretty logic that if you have left floated elements clear:left will clear lefts. No? – Roko C. Buljan Oct 19 '14 at 18:12
  • Your link explained me right that by clearing both property container element stretched to the width of other elements but here other elements are getting inside the container even on clearing left. – Naseer Oct 19 '14 at 18:13
  • 1
    @khan: if all elements are floated left then `clear: left` is sufficient. – Salman A Oct 19 '14 at 18:16

1 Answers1

1

1. We often read that a float is not in the flow. One side-effect of this behavior is that floated elements do not affect the height of their parent. Your observation that [floated elements] stay outside the container is somewhat incorrect; floated elements remain inside the container but the container's height is 0 so these elements render outside.

2. The clear property indicates that no floated element is allowed on the left, right or both sides of the cleared element. When you add a cleared element after floated elements, it is pushed below all left and/or right floated elements that appear before it to satisfy the condition. (Remember: a left-floated element allows content to flow along its right side; a right-floated element allows content to flow around its left edge; cleared content by-passes this feature).

A cleared element is still an in-flow element, when it is pushed down will will stretch the parent element along with it.

Salman A
  • 262,204
  • 82
  • 430
  • 521
  • Very Well explained Salman and I was looking for that.Could you please elaborate a bit for a newbie in css like me your point. – Naseer Oct 19 '14 at 18:16
  • Salman Bhai when I entered height property to the container even 1px then whole effect of clear property crashed? – Naseer Oct 19 '14 at 18:25
  • 1
    Yes, you forced a height of 1px instead of allowing the parent to size itself. In this case the parent will be 1px tall and floated elements sill display outside it, messing with the layout. – Salman A Oct 19 '14 at 18:39