CODEWITHSUNDEEP
htmlcss
Edison
Edison

Reputation: 4281

weird behavior of clear property

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

Upvotes: 0

Views: 46

Answers (1)

Salman Arshad
Salman Arshad

Reputation: 272036

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.

Upvotes: 1

Related Questions