CODEWITHSUNDEEP
htmlcss
Anil Namde
Anil Namde

Reputation: 6608

How CSS floated div behaving without clearfix

Hey guys need some help on the html and css float stuff. Please check http://jsfiddle.net/anilnamde/DVJ4b/ and and following are the queries i have. Also including code below

    .p{
    background:red;
    width:100%;
    padding:20px;

}

.p div{
    width:49%;
    background:blue;
    float:left;
    margin-left:5px;
    min-height: 200px;
}
</style>
<body>
<div class="p">
    <div>
        first
    </div>    
    <div>second
    </div>
    This is the test text
</div>
<p>This is good</p>
</body>
  1. As per my understanding p tag and text inside parent div should go behind the two floated elements. Which is not happening.
  2. Again somehow without any clearfix or clear both or overflow hidden parent div's height is appearing correct. Which is kind of getting difficult to understand.

Can someone help me understand this.

As as per what i was started to understand its standard example to understand float related issue and apply clearfix to fix it. But suddenly i found its started working fine without clearfix. So i am currently kind of not really sure about my float understanding.

Upvotes: 0

Views: 167

Answers (5)

rafaelbiten
rafaelbiten

Reputation: 6240

The given example is not really good. You have two floated elements that together will take up almost 100% of the available width leaving no space for a "p" tag to 'float' around it. So, what's happening is that the text "This is the test text" IS actually floating 'around' AND 'below' the floated divs (just wrap this text with a p tag and apply a background-color to it using .p p { background-color: gray; } and you'll see). This proves that your first statement (

...Which is NOT happening.

) is wrong, because it IS happening.

The problem is: because you don't have space for the text to float to the right of those floated boxes, the text itself is working 'like' a clearfix.

Now, delete the text "This is the test text" and you'll see a need for a clear fix, because the red background will shrink to the top, acting as expected and crying for a clearfix.

Wanna try something different? Put the "This is the test text" back to its place and change the width of those floated boxes to 51% and be amazed!

Hope I made myself "clear" here. ;)

Upvotes: 0

Cody Guldner
Cody Guldner

Reputation: 2886

Here is my solution http://jsfiddle.net/burn123/DVJ4b/5/

Summary of Changes

  • Added an article to This is the test test
  • Added clear:both; to the article so that it will always display below the floated objects.
  • Set the box-sizing property to border-box so that there won't be an overflow. This sets the element so that whatever width or height you give an element, it will follow that width no matter what.
  • Added a responsive element so that before 575px it will float, and any smaller than that the width is set to 100%. This is just optional

This is just a way to improve your layout if needed

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191739

The text after the last floated div is working as the "clearfix" and "pulls" the red box down below:

http://jsfiddle.net/DVJ4b/1/

As for why the <p> tag text appears below the red box, that's because the outer div is not floated.

If you have floats before the content, the floats won't overlap them. Floats are still part of the flow content; it just has to do with positioning:

http://jsfiddle.net/DVJ4b/4/

I think you may be getting confused with absolute positioning.

Upvotes: 0

isherwood
isherwood

Reputation: 61063

  1. The text inside .p is wrapping around the floated divs as it should, but you've left no room for it to do so at the sides, so it falls below. The text in the p tag is outside div.p, so it appears below. Again, this is expected. Div.p is a block-level element, so it's full-width even without you explicitly stating so.

  2. Your parent div expands to wrap the text that has wrapped below the floated divs. This is expected.

Upvotes: 1

mash
mash

Reputation: 15229

This behaviour is because you have some text inside the .p div which has to go somewhere. The best place for it to fit, accounting for the floating elements taking up the 200px height, is below them, thus stretching the .p div.

If you remove the text from inside the .p div ("This is the test text"), you'll see the height of the .p div is much smaller. Now the height is caused by the padding, and you'll want to fix this with a clearfix or overflow: hidden.

Upvotes: 0

Related Questions