Home/ Questions/Q 6751171
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T12:53:43+00:00

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

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0