We can disable the floating effect of an HTML element by using the CSS property, clear. The clear property uses the left value to disable the effect of left floated element and the right value to disable the effect of right floated element. Let's create a Web pages named clear.html to understand how to turn off the effect of a floated element.
<!doctype html>
<head>
<title>clear property </title>
<style type="text/css">
.off
{
float:left clear:left;
}
</style>
</head>
<body>
<h1>Turning off floating of the element</h1>
<p style="color:pink;background-color:green;">
<img class="off" src="bike.jpg">
This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.
</body>
</html>
IMG element is set as left floated by using the float property. Then the clear property is used to disable this effect.
The Output of above WebPage
<!doctype html>
<head>
<title>clear property </title>
<style type="text/css">
.off
{
float:left clear:left;
}
</style>
</head>
<body>
<h1>Turning off floating of the element</h1>
<p style="color:pink;background-color:green;">
<img class="off" src="bike.jpg">
This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.
</body>
</html>
IMG element is set as left floated by using the float property. Then the clear property is used to disable this effect.
The Output of above WebPage
No comments:
Post a Comment