HI WELCOME TO SIRIS

CSS float and CSS clear property

n this tutorial learn CSS float and CSS clear property.

CSS float Property

CSS Float property set the element to wrap around left or right side from another element.
PropertiesValueDescription
floatleft
right
none		Set element to wrap left or side from another element.
Example
<!DOCTYPE html>
<html>
<head>
  <title>CSS float property</title>
</head>
<body>
  <div style="width:210px;">
    <p style="float: left; margin: 5px; font-size: 20px;"> Float </p>
    <p>This paragraph is display left side and CSS font-size 18px are set.</p>
  </div>
</body>
</html>
Run it...   »

CSS clear Property

CSS Clear property clean the floating left or right side or may be both side wrap area.
So it's effect is next element start in next new line.
PropertiesValueDescription
clearleft
right
both
none		specify of which floating side to clean.
Example
<!DOCTYPE html>
<html>
<head>
  <title>CSS clear property</title>
</head>
<body>
  <div style="width:210px;">
    <p style="float: left; margin: 5px; font-size: 20px;"> Float </p>
    <p style="clear: both;">This paragraph display clear both side and CSS font-size 18px are set.</p>
  </div>
</body>
</html>