Reputation: 130
CSS Float explanation
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>
Upvotes: 0
Views: 556
Answers (2)
Reputation: 5998
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/
Upvotes: 3
