My understanding is that if a parent contains floated child elements it collapses because it does not expand around the floated children as it ignores them when calculating its height.
Why does the addition of another element (virtual or otherwise)with clear applied to it- make the parent consider the heights of the floated children?
Let me make my question clear with this crude code below:
<div>
<p style="float: left;">Div 1</p> /*height not considered*/
<p style="float: left;">Div 2</p> /*height not considered*/
<div class="clearfix"></div> /*why does this now make the parent include child heights above */
</div>
css
.clearfix{
clear:both;
}
How does the Clear property make the Parent consider its Child elements. Any help much appreciated.
It doesnât recognize the floated elements still. The clearfix in that example (poorly implemented because thatâs not the actual clearfix), simply does this:
The parent sees the cleared element and is like âhey! I have to contain that because thatâs what I doâ. It has 0 clue WHY there is space above is (div 1/2) but it doesnât matter. Itâll contain all the way down to the clearfix div and as a result, includes the div1/2 in there. So it technically doesnât ârecognizeâ the floated elements are there still. It just sees the cleared element and knows it has to expand to contain that, and floated elements, being above it in the HTML / visual order, tag along .
If as you say it only sees the cleared element, how does the parent know what height it needs to be? If it only sees the cleared element should its height be just enough(ie excluding the child float heights)to contain that cleared element?
The div1/2 in your example; think of them as 10px height each. So 20px total.
The clearfix element is â20pxâ down from the top of the parent, and letâs say that itâs 30px tall. So the parent figures out that itâs 30px tall (not hard; itâs a regular element so it is easy to see the height), yet it sees itâs 20px down, so the browser does a calculation to figure out that it needs to be 30px (the height of clearfix) + 20px âoffsetâ so the height generated is enough to contain everything.
I would like to submit another of my âuniqueâ (not your creation) demo pages. This one about collapsing parents?
Disclaimers:
Just so ya know, I intentionally did NOT refer to <p>aragraph tags as <div>s in my example. I also did NOT refer to the CSS property {clear:both} as a âclearfixâ, which is the proper name for a clearing mechanism that used to be considered a hack. Some refs:
If you can live with all of that, then I invite you to give this a look. It is a more practial example of clearing floats. Instructions are at the top of the page within comment marks.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>template</title>
<!--
0. Examine the rendered page.
1a. Enable "clearfake" by removing the left-most CSS comment mark from "clear:both".
b. Notice that the last line of text moves below and to the left of the content above it.
c. Disable "clearfake" by restoring the left-most CSS comment mark.
2a. Enable "overflow:hidden" by removing the left-most CSS comment mark.
b. Notice that all of the sections are separated ("cleared").
3a. You can delete the .clearfake div entirely. It is doing nothing.
b. Notice that the page is unchanged.
4. Take a long break. You earned it.
-->
<style type="text/css">
.section {
/* overflow:hidden; /* */
}
img {
float:left;
}
p {
outline:1px dotted red;
background-color:#fed;
margin:1em 0;
}
.clearfake {
/* clear:both; /* */
}
/* I usually use this version of clearfix, if one is needed. Not used in this demo, but you can try it, if you wish. */
.cf:before,
.cf:after {
content:"";
display:table;
line-height:0;
}
.cf:after {
clear:both;
}
</style>
</head>
<body>
<div class="section">
<img src="http://www.pmob.co.uk/temp/images/zimg1.jpg" alt="" width="300" height="300">
<p>This is a paragraph about someone spending his vacation in a lovely place.</p>
</div>
<div class="section">
<img src="http://www.pmob.co.uk/temp/images/zimg2.jpg" alt="" width="300" height="300">
<p>This is a paragraph about someone spending his vacation in a lovely place.</p>
</div>
<div class="section">
<img src="http://www.pmob.co.uk/temp/images/zimg3.jpg" alt="" width="300" height="300">
<p>This is a paragraph about someone spending his vacation in a lovely place.</p>
</div>
<div class="clearfake"></div>
<p>And the beat goes on....</p>
</body>
</html>
Floated objects are removed from the normal flow of the page. âoverflow: other-than-visibleâ creates a new stacking context in which the float is âcontainedâ, as will âdisplay:table; width:100%;â and âfloat:left; width:100%â.
How does âclear:bothâ work? It creates a full width barrier that prevents anything below it from rising above it. By definition it acts on floats. Look up: clear:left, clear:right, clear:both. See what they do.
To simplify further what happens when a floated element is cleared using the âclearâ property is that the top margin of the element that you want to clear the float is increased until the element is below the floated object. That means that the container parent still doesnât need to know about the float as such because the non floated element it sees inside has a top margin pushing it down the page and encloses that as per normal.
(Whether browsers actually manipulate the top margin of said element (some do) the effect is the same in that the element remains below the float.)
@Paul,
Thank you for your additions (and corrections )
I recognized one effect in that demo that I canât quite grasp/explain. If .section is assigned {float:left;width:100%;} the background color of the entire .section becomes light tan. This is interesting because the only object with the bg color is the paragraph tag. I donât understand how that color manages to spread throughout the div.
That confused me for a second or two but its simply that because all the elements are now floated the last p tag at the end must stretch up to the containing block which is above the first float and as we know borders and backgrounds slide under floats.
.