test clear left result
<!DOCTYPE html>
<html>
<head>
<style>
img.left {
float: left;
}
img.right {
float: right;
}
p.clear-left {
clear: left;
}
p.clear-right{
clear: right;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<h1>The clear Property</h1>
<img class="left" src="w3css.gif" width="100" height="132">
<img class="right" src="w3css.gif" width="200" height="264">
<p class="clear-left">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p><strong>Remove the "clear" class to see the effect.</strong></p>
</body>
</html>
test clear right result
<!DOCTYPE html>
<html>
<head>
<style>
img.left {
float: left;
}
img.right {
float: right;
}
p.clear-left {
clear: left;
}
p.clear-right{
clear: right;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<h1>The clear Property</h1>
<img class="left" src="w3css.gif" width="200" height="264">
<img class="right" src="w3css.gif" width="100" height="132">
<p class="clear-right">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p><strong>Remove the "clear" class to see the effect.</strong></p>
</body>
</html>