CSS float and CSS clear property

In 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.

Properties	Value	Description
float	left 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.

Properties	Value	Description
clear	left 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>

Run it... »