/* Answer to: "css clear both" */
/*
Syntax:
clear: none|left|right|both|initial|inherit;
Does not allow floating elements on the left or the right side
of a specified element, in this case, the <p> element:
*/
img {
float: left;
}
p.clear {
clear: both;
}CSS Syntax
clear: none|left|right|both|initial|inherit;
Property Values
Value Description
none Default. Allows floating elements on both sides
left No floating elements allowed on the left side
right No floating elements allowed on the right side
both No floating elements allowed on either the left or the right side
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<h1>The clear Property</h1>
<img src="w3css.gif" width="100" height="132">
<p>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 class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
<p><strong>Remove the "clear" class to see the effect.</strong></p>
</body>
</html>