CSS Float explanation

Question

CSS Float is making me crazy, can any one explain the following situation?

How to reproduce: just copy following code snippet from

http://www.w3schools.com/css/tryit.asp?filename=trycss_float_clear

Why without clear:both is not working?

                <html>
                <head>
                <style type="text/css">
                .thumbnail 
                {
                float:left;
                width:110px;
                height:90px;
                margin:5px;
                }
                .text_line
                {
                display:block;
                height:90px;
                width:300px;
                margin:0px;

                background-color:red;
                }


                </style>
                </head>

                <body style="display:block">

                <h3>Image Gallery</h3>
                <p>Try resizing the window to see what happens when the images does not have enough room.</p>
                <img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
                <img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
                <img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
                <img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
                <p class="text_line">a</p>

                <img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
                <img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
                <img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
                <img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
                </body>
                </html>

Seems to work as expected. Can you explain what the problem is, and what you are trying to achieve exactly? — Nix, Nov 01 '11 at 09:56
To me it seems really weird that you have taken away something ( `clear: both;` ) and then you wonder how it doesn't work the way that w3school example does. If you delete or replace something and things stop working.. chances are that you might want to put it back. — Joonas, Nov 01 '11 at 09:59
For the record, [w3schools is bad](http://w3fools.com), and the [floatutorial](http://css.maxdesign.com.au/floatutorial/) is probably a better resource if you want to learn about floats. — You, Nov 01 '11 at 10:02
I was trying to get to know the mechanism of "Visual formatting model". http://www.w3.org/TR/CSS2/visuren.html — Xiaojun, Nov 01 '11 at 10:09

score 3 · Accepted Answer · answered Nov 01 '11 at 10:13

When you float a block element, you are telling the browser to position it next to the previous floated object, so long as the container is wide enough (otherwise it will drop below the previous object).

When you float an object, you are essentially taking it out of the document flow. A floated object is part of the parent container, but it's box model styling (width, height etc.) is not calculated into the parent container. So if a parent container has a bunch of floated elements in it, it's height will be equal to zero (if height is not fixed), because the height of the floated element is ignored.

To fix this, you need to clear the floats, which basically means order will be restored.

Either put a div with clear:both; in the bottom of the parent container, or put this clearfix class on the parent container:

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

This has been a brutally simplified explanation. Read more about floats and clearing here: http://dev.opera.com/articles/view/35-floats-and-clearing/

score 2 · Answer 2 · answered Nov 01 '11 at 09:54

2

Just put the clear:both back in (in .text_line)

answered Nov 01 '11 at 09:54

Jordan Wallwork

3,116
2
24
49

Actually want i want is how float works? Regarding the question, why the "a" is placed out of the containing element p? – Xiaojun Nov 01 '11 at 10:06

CSS Float explanation

2 Answers2

Linked