I’m trying to understand clear:both CSS property . I have gone through the w3school tutorial.
Here is an example of clear:both from W3school
when I remove the clear:both from the code in the left hand side …the output remain the same !
I don’t understand how does clear:both works here ?
please clarify
Yet another example of how NOT to teach people CSS.
This is the code, for anyone who doesn’t want to touch the link:
<html>
<head>
<style type="text/css">
img
{
float:left;
clear: both;
}
</style>
</head>
<body>
<p>This is some text.
<img src="logocss.gif" width="95" height="84" />
This is some text.</p>
</body>
</html>
windowsxp: you can see the structure better if you do this code:
<html>
<head>
<style type="text/css">
img
{
float:left;
[b]border: 1px solid #f00;[/b]
}
</style>
</head>
<body>
<p>This is some text.[b]</p>[/b]
<img src="logocss.gif" width="95" height="84" />
[b]<p>[/b]This is some text.</p>
</body>
</html>
Because what they wanted to show you, this example will not show you (maybe in IE5 or something, lawlz), but here you see where the image is: in between two p’s. The border on it shows you how it’s really sitting next to the second P.
Clear: both on the image won’t do anything because the float isn’t riding up alongside the first p anyway.
But the way they had the code originally, the image was floated and all inline content around it was just pushed to the side. Clearing does nothing here.
To see clearing in action:
Start code:
<html>
<head>
<style type="text/css">
img
{
float:left;
border: 1px solid #f00;
}
</style>
</head>
<body>
<div>
<img src="http://stommepoes.nl/newt.png" width="136" height="123" alt="newt" />
<img src="logocss.gif" width="95" height="84" alt="css" />
</div>
</body>
</html>
Here you see two floats sitting next to each other. Clear makes block elements (including other floats) stay underneath floats.
Add “clear: both” (or clear: left) to the second image:
<html>
<head>
<style type="text/css">
img
{
float:left;
border: 1px solid #f00;
}[b]
.clr {
clear: left;
}[/b]
</style>
</head>
<body>
<div>
<img src="http://stommepoes.nl/newt.png" width="136" height="123" alt="newt" />
<img [b]class="clr"[/b] src="logocss.gif" width="95" height="84" alt="css" />
</div>
</body>
</html>
(clear: both is safer because IE has issues with floats in the same direction not being able to clear other floats…)
This is a float with a block (non-float) next to it, who has inline content:
<html>
<head>
<style type="text/css">
img
{
float:left;
margin-left: 10px;
border: 1px solid #f00;
}
[b]p {
background-color: #ff0;
}[/b]
</style>
</head>
<body>
<div>
<img src="logocss.gif" width="95" height="84" alt="css" />
[b]<p>Lots n lotsa text... lots n lotsa text... en nog meer tekst en meer en meer m0aR t3Xt m0aR t3Xt m0aR t3Xt m0aR t3Xt m0aR t3Xt m0aR c0wBELL!!!!!! en nog meer tekst..Lots n lotsa text... lots n lotsa text... Lots n lotsa text... lots n lotsa text... Lots n lotsa text... lots n lotsa text... </p>[/b]
</div>
</body>
</html>
(note I’m seeing a capital P there but in my editor it’s lower case )
In Modern browsers and IE8, you can see the p itself goes behind the float, but the inline stuff inside it wraps around the float.
In IE6 and 7, this will also happen but if the p has Layout (set a width or height or zoom… etc on it) then the p will not slide behind the float at all.
Now set clear: both on the p.
<html>
<head>
<style type="text/css">
img
{
float:left;
margin-left: 10px;
border: 1px solid #f00;
}
p {
[b]clear: both;[/b]
background-color: #ff0;
}
</style>
</head>
<body>
<div>
<img src="logocss.gif" width="95" height="84" alt="css" />
<p>Lots n lotsa text... lots n lotsa text... en nog meer tekst en meer en meer m0aR t3Xt m0aR t3Xt m0aR t3Xt m0aR t3Xt m0aR t3Xt m0aR c0wBELL!!!!!! en nog meer tekst..Lots n lotsa text... lots n lotsa text... Lots n lotsa text... lots n lotsa text... Lots n lotsa text... lots n lotsa text... </p>
</div>
</body>
</html>
Now you can see what clearing does. Next, you should see what enclosing a float is.
SP hit the key points – the broken example is precisely why I’ve been saying W3Schools has been aging like fine milk for the better part of a decade.
It’s a poor place to learn, but actually having that little editor app is nice: windowsxp can just plug the examples in and see what’s going on, even though there’s no doctype, without worrying about what IE does vs what some other browser does (he’ll have to worry about that as well, but not now when the basic concepts are being learned).
Thanks for the posts. I would like to understand the problem first.
<html>
<head>
<style type="text/css">
img
{
float:left;
margin-left: 10px;
border: 1px solid #f00;
}
p{
background-color: #ff0;
}
</style>
</head>
<body>
<div>
<img src="logocss.gif" width="95" height="84" alt="css" />
<p>Lots n lotsa text... lots n lotsa text... en nog meer tekst en meer en meer m0aR t3Xt m0aR t3Xt m0aR t3Xt m0aR t3Xt m0aR t3Xt m0aR c0wBELL!!!!!! en nog meer tekst..Lots n lotsa text... lots n lotsa text... Lots n lotsa text... lots n lotsa text... Lots n lotsa text... lots n lotsa text... </p>
</div>
</body>
</html>
In this case, does float:left of the <img> element impacting the <p> element ?Is it the reason for which the paragraph is sitting next ( instead of a new line) to the image ? I guess so.
Does float:left of the <img> element can impact ALL other element in the page OR it can just impact the element next to it ?
In this case, does float:left of the <img> element impacting the <p> element ?Is it the reason for which the paragraph is sitting next ( instead of a new line) to the image ? I guess so.
Remember that even though we give them height and width, images are normally considered inline elements. Take the “float: left” off the image and you’ll see it act like an inline.
Set “display: block” on the image to see what a block element does around the P. A float is a type of block, but it’s one that’s kinda like a Post-It note: the top is attached, but the bottom of it is floating closer to you (the viewer). So, block elements don’t “see” it, and they act as if the float wasn’t there at all. Inline content however can see the float and get out of its way.
Does float:left of the <img> element can impact ALL other element in the page OR it can just impact the element next to it ?
Code like
img {
float: left;
}
is generic enough that it will hit every img element (unless other code further down says otherwise). However if there are no other img elements on the page, the affected elements are:
the p
the div containing all of them.
The div who is holding the img and the p will not “see” the image, even though it’s a child inside. In Internet Explorer, the div will “see” the image if you give the div “Layout” (see Haslayout)… this is a bug of IE6 and 7.
To make other browsers make the div “see” the float, you can use any of the float enclosing techniques (read this: Enclosing Floats).
If you want to see what I’m talking about, reduce the amount of text in the P (so it doesn’t wrap lines anymore) and give the div a background colour.
You’ll see the div is only as tall as the p content inside it. The image will “hang out”.
Any further divs who come after the first div will also ignore the image. This means it will ride up under the float (like sliding paper under a Post-It note) and again, any inline content inside that following div will also wrap around the float.
I checked what are the impacts its suffering. Here is what I have found.
I have added a div color also to check the details.
<html>
<head>
<style type="text/css">
img
{
float:left;
border:1px solid red;
}
p{
background-color:#ff0;
}
</style>
</head>
<body>
<div style="background-color:blue">
<img src="logocss.gif" width="95" height="84" alt="css" />
<p>Lots n lotsa text... lots n lotsa text... en nog meer tekst </p>
</div>
</body>
</html>
(1) div background color vanished.
(2) P element’s text content sits next to the <img> elelement.
added clear:both in <p> css. This restores div background color. and puts down the block element <p> to the new line of <img> elelement.
But when I do this experiment…
<html>
<head>
<style type="text/css">
img
{
float:left;
border:1px solid red;
}
p{
clear:both;
background-color:#ff0;
}
</style>
</head>
<body>
<div style="background-color:blue;border:2px solid pink;">
<img src="logocss.gif" width="95" height="84" alt="css" />
<p>Lots n lotsa text... lots n lotsa text... en nog meer tekst </p>
</div>
</body>
</html>
I see a gap between <p> element and end of <div> element . I don’t understand why there is gap at the bottom …between <p> and end of <div>
Nice.
Impacts:
(1) div background color vanished.
(2) P element’s text content sits next to the <img> elelement.
added clear:both in <p> css. This restores div background color. and puts down the block element <p> to the new line of <img> elelement.
The div background colour vanished, but only because it was covered up by the p’s background colour. The div was only as big as the p was, because all it saw was the p and encloses it.
Remove the p’s colour to see the div again:
<html>
<head>
<style type="text/css">
div {
background-color: #00f;
}
img
{
float:left;
border:1px solid red;
}
[b]p{
}[/b]
</style>
</head>
<body>
<div>
<img src="logocss.gif" width="95" height="84" alt="css" />
<p>Lots n lotsa text... lots n lotsa text... en nog meer tekst </p>
</div>
</body>
</html>
Now it will be blue exactly where it was yellow. (I moved styles over to the css section… might as well try to keep it clean)
When the p has clear: both; on it, the div is still as large as the p it holds but there is now space between where the top of the div is and the bottom of the P. The div still doesn’t actually “see” the image, but it does “see” the non-floated child P and so still encloses that p.
This is the source of the original float-clearing trick: the clearing div or clearing br.
It’s considered “bad practice” today but it always works:
<div>
<float/>
<float/>
<br class=“clear”>
</div>
br.clear {
clear: both;
}
Today there are other ways of making the div enclose its floats. We try to avoid the clearing-br or clearing-div because it’s adding markup to the HTML page, not for content but to get the CSS to work. So today we use pure-CSS techniques.
But when I do this experiment…
I see a gap between <p> element and end of <div> element . I don’t understand why there is gap at the bottom …between <p> and end of <div>
This one gets trickier: when the div just has a background-color (or background-image), it only has to put that background colour or image on the actual area where it is. This is called the “padding box”.
But when you add a border to the div, the div must enclose all parts of its children, because now it has to show the “border box”. The gap you see is from the natural/default margin of the p. You can see this when you
<html>
<head>
<style type="text/css">
img
{
float:left;
border:1px solid red;
}
p{
clear:both;
[b]margin: 0;[/b]
background-color:#ff0;
}
</style>
</head>
<body>
<div style="background-color:blue;border:2px solid pink;">
<img src="logocss.gif" width="95" height="84" alt="css" />
<p>Lots n lotsa text... lots n lotsa text... en nog meer tekst </p>
</div>
</body>
</html>
Margins are not part of the “padding box” of an element, so when you give that element a background colour or image, the margins don’t get coloured (the padding, if any, does). So you never saw the default margin on the p (most browsers add default top and bottom margins on P elements). But a container with a border, who must show its “border box”, must contain all parts of its children, including their (vertical) margins!
The exception to this is top margins: they may collapse (see Margin collapse) so if we have the p at the top (before the img) and it has a top margin and we give a border to the div, you won’t see a gap above the p (you woul expect to see some of the div’s blue to peek out). Instead, the margin collapses into the div itself and you instead get a gap above the div (the margin moves to outside the div). I think margin-collapse is confusing so I just keep in mind that whenever I have strange gaps and I have top margins on things, I can stop margin collapse by either adding 1px of padding there or 1px of border to the parent (if the p has a border or padding, its margin isn’t allowed to collapse). If I use a border I’ll make it invisible so you don’t see it.
So here’s the p with 20px top-bottom margin:
<html>
<head>
<style type="text/css">
body {
background-color: #f00;
}
div {
background-color: #00f;
}
p{
margin: 20px 0;
background-color: #ff0;
}
img {
float:left;
border:1px solid red;
}
</style>
</head>
<body>
<div>
<p>Lots n lotsa text... lots n lotsa text... en nog meer tekst </p>
<img src="logocss.gif" width="95" height="84" alt="css" />
</div>
</body>
</html>
Add a thin 1px border to the top of the div, and suddenly there’s a whole lot more space there:
<html>
<head>
<style type="text/css">
body {
background-color: #f00;
}
div {
background-color: #00f;
[b] border-top: 1px solid #00f;[/b]
}
p{
margin: 20px 0;
background-color: #ff0;
}
img {
float:left;
border:1px solid red;
}
</style>
</head>
<body>
<div>
<p>Lots n lotsa text... lots n lotsa text... en nog meer tekst </p>
<img src="logocss.gif" width="95" height="84" alt="css" />
</div>
</body>
</html>