The clear
property indicates that the left, right or both sides of an element can not be adjacent to earlier floated elements within the same block formatting context. Cleared elements are pushed below the corresponding floated elements. Examples:
clear: none;
Element remains adjacent to floated elementsbody {_x000D_
font-family: monospace;_x000D_
background: #EEE;_x000D_
}_x000D_
.float-left {_x000D_
float: left;_x000D_
width: 60px;_x000D_
height: 60px;_x000D_
background: #CEF;_x000D_
}_x000D_
.float-right {_x000D_
float: right;_x000D_
width: 60px;_x000D_
height: 60px;_x000D_
background: #CEF;_x000D_
}_x000D_
.clear-none {_x000D_
clear: none;_x000D_
background: #FFF;_x000D_
}
_x000D_
<div class="float-left">float: left;</div>_x000D_
<div class="float-right">float: right;</div>_x000D_
<div class="clear-none">clear: none;</div>
_x000D_
clear: left;
Element pushed below left floated elementsbody {_x000D_
font-family: monospace;_x000D_
background: #EEE;_x000D_
}_x000D_
.float-left {_x000D_
float: left;_x000D_
width: 60px;_x000D_
height: 60px;_x000D_
background: #CEF;_x000D_
}_x000D_
.float-right {_x000D_
float: right;_x000D_
width: 60px;_x000D_
height: 120px;_x000D_
background: #CEF;_x000D_
}_x000D_
.clear-left {_x000D_
clear: left;_x000D_
background: #FFF;_x000D_
}
_x000D_
<div class="float-left">float: left;</div>_x000D_
<div class="float-right">float: right;</div>_x000D_
<div class="clear-left">clear: left;</div>
_x000D_
clear: right;
Element pushed below right floated elementsbody {_x000D_
font-family: monospace;_x000D_
background: #EEE;_x000D_
}_x000D_
.float-left {_x000D_
float: left;_x000D_
width: 60px;_x000D_
height: 120px;_x000D_
background: #CEF;_x000D_
}_x000D_
.float-right {_x000D_
float: right;_x000D_
width: 60px;_x000D_
height: 60px;_x000D_
background: #CEF;_x000D_
}_x000D_
.clear-right {_x000D_
clear: right;_x000D_
background: #FFF;_x000D_
}
_x000D_
<div class="float-left">float: left;</div>_x000D_
<div class="float-right">float: right;</div>_x000D_
<div class="clear-right">clear: right;</div>
_x000D_
clear: both;
Element pushed below all floated elementsbody {_x000D_
font-family: monospace;_x000D_
background: #EEE;_x000D_
}_x000D_
.float-left {_x000D_
float: left;_x000D_
width: 60px;_x000D_
height: 60px;_x000D_
background: #CEF;_x000D_
}_x000D_
.float-right {_x000D_
float: right;_x000D_
width: 60px;_x000D_
height: 60px;_x000D_
background: #CEF;_x000D_
}_x000D_
.clear-both {_x000D_
clear: both;_x000D_
background: #FFF;_x000D_
}
_x000D_
<div class="float-left">float: left;</div>_x000D_
<div class="float-right">float: right;</div>_x000D_
<div class="clear-both">clear: both;</div>
_x000D_
clear
does not affect floats outside the current block formatting contextbody {_x000D_
font-family: monospace;_x000D_
background: #EEE;_x000D_
}_x000D_
.float-left {_x000D_
float: left;_x000D_
width: 60px;_x000D_
height: 120px;_x000D_
background: #CEF;_x000D_
}_x000D_
.inline-block {_x000D_
display: inline-block;_x000D_
background: #BDF;_x000D_
}_x000D_
.inline-block .float-left {_x000D_
height: 60px;_x000D_
}_x000D_
.clear-both {_x000D_
clear: both;_x000D_
background: #FFF;_x000D_
}
_x000D_
<div class="float-left">float: left;</div>_x000D_
<div class="inline-block">_x000D_
<div>display: inline-block;</div>_x000D_
<div class="float-left">float: left;</div>_x000D_
<div class="clear-both">clear: both;</div>_x000D_
</div>
_x000D_
Mr. Alien's answer is perfect, but anyway I don't recommend to use <div class="clear"></div>
because it just a hack which makes your markup dirty. This is useless empty div
in terms of bad structure and semantic, this also makes your code not flexible. In some browsers this div causes additional height and you have to add height: 0;
which even worse. But real troubles begin when you want to add background or border around your floated elements - it just will collapse because web was designed badly. I do recommend to wrap floated elements into container which has clearfix CSS rule. This is hack as well, but beautiful, more flexible to use and readable for human and SEO robots.
Just try to remove clear:both
property from the div
with class
sample
and see how it follows floating divs
.
When you want one element placed at the bottom other element you use this code in CSS. It is used for floats.
If you float content you can float left or right... so in a common layout you might have a left nav, a content div and a footer.
To ensure the footer stays below both of these floats (if you have floated left and right) then you put the footer as clear: both
.
This way it will stay below both floats.
(If you are only clearing left then you only really need to clear: left;
.)
Go through this tutorial:
Source: Stackoverflow.com