Clearing Floats

When a float is contained within a container box that float does not automatically force the container's bottom edge down as the float is made taller. Therefore, we are using clear properties in which it has "value" named "both".

Example

Container 1

1
2
3
4

Here we are not used Clear Properties

Container 2

1
2
3
4

Here we are used Clear Properties

CSS

.clear{clear:both}

When you give that container box the clear property, i.e. {clear: both;}, it extends the top margin of the cleared box, pushing it down until it "clears" the bottom of the float. In other words, the top margin on the cleared box (no matter what it may have been set to), is increased by the browser, to whatever length is necessary to keep the cleared box below the float.

In Netscape, borderless code doesn't work. So, the following code can be used in Netscape.

CSS

.container{
	background-color:#fff; 
	border:1px solid #718A8E;/* Require For Nestcap */
	padding:1px;
	color:#FFFFFF;
	margin-bottom:20px;
	text-align:center;
}
.container .content{
	float:left;
	width:70px; 	
	background-color:#64787F;	
	border-right:1px solid #CCCCCC;
}
.clear{
   clear:both;/*Require*/
}

Clear properties always work in block level element therefore I have used <p> tag & you can also try it in div element. Some Browser also Support <br clear="all" />

XHTML

<p>Container 1</p>
 <div class="container">
  <div class="content">1</div>
  <div class="content">2</div>
  <div class="content">3</div>
  <div class="content">4</div>
  <p>Here we are not used Clear Properties</p> 
 </div>
<p>Container 2</p>
 <div class="container">
  <div class="content">1</div>
  <div class="content">2</div>
  <div class="content">3</div>
  <div class="content">4</div>
  <p class="clear">Here we are used Clear Properties</p>
  <!--<br clear="all" />-->
 </div>

Tableless

1
2
3
4
5
2
4
6
8
10