Clear

Contact Us or call 1-877-932-8228
Clear

Clear

The clear property is used to specify whether content that is flowing to the side of a floating block should drop down beneath that block. Possible values are shown below:

  • left
  • right
  • both
  • none

The following files demonstrate how clear and float can be used in combination with positioning to produce virtually any blocked page layout:

  1. PositioningAndVisibility/Demos/FloatPosition1a.html
  2. PositioningAndVisibility/Demos/FloatPosition1b.html
  3. PositioningAndVisibility/Demos/FloatPosition2a.html
  4. PositioningAndVisibility/Demos/FloatPosition2b.html

Code Sample:

PositioningAndVisibility/Demos/FloatPosition1a.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#wrapper {
	position:absolute;
	left:50%;
	top:30px;
	width: 450px;
	margin-left:-225px;
}

.box {
	border: 2px solid #f00;
	background-color:#000066;
	color:#f90;
	text-align:center;
	font-size:100px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
}

#box2 {
	height:200px;
	width:200px;
	margin-bottom:15px;
}

#box1 {
	float:right;
	height:400px;
	width:200px;
	margin-bottom:15px;
}

#box3 {
	height:100px;
	width:100%;
	clear:both;
}
</style>
<title>Positioning Boxes</title>
</head>

<body>
<div id="wrapper">
	<div id="box1" class="box">1</div>
	<div id="box2" class="box">2</div>
	<div id="box3" class="box">3</div>
</div>
</body>
</html>

Code Explanation

The above code will render the following: Code Renders This Image

Box 3 will always remain below the taller of the two other boxes as we can see by changing the height of box 1 to 100px: Box 3 is Taller

Now let's get a header in there and add a column:

Code Sample:

PositioningAndVisibility/Demos/FloatPosition2a.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#wrapper {
	width:800px;
}

#insideWrapper {
	width:612px;
	position:relative;
	left:50%;
	margin-left:-311px;
}

.box {
	border: 2px solid #f60;
	background-color:#006;
	color:#f90;
	text-align:center;
	font-size:100px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
}

#box1 {
	float:left;
	height:300px;
	width:200px;
}

#box2 {
	float:left;
	height:400px;
	width:200px;
}

#box3 {
	float:left;
	height:300px;
	width:200px;
}

#divClear {
	height:50px;
	clear:both;
	border:4px solid #000;
	background-color:#f00;
}

#divTop {
	height:50px;
	border:4px solid #000;
	background-color:#00f;
}
</style>
<title>Positioning Boxes</title>
</head>

<body>
<div id="wrapper">
	<div id="divTop" style=""></div>
	<div id="insideWrapper">
		<div id="box1" class="box">1</div>
		<div id="box2" class="box">2</div>
		<div id="box3" class="box">3</div>
	</div>
	<div id="divClear" style="background:red"></div>
</div>
</body>
</html>

Code Explanation

The above code will render the following: Code Will Render This Image

Again, the footer will always remain below the taller of the other columns as we can see by changing around the height of the boxes: Footer Remains Taller

Next