CSS Layout — Float & Clear

CSS Float & Clear Properties

By default, every element in the webpage appears on the left side. Generally, you would want that. But what if you want something on the right! We add float property in our stylesheet:

#first-div {
 color: green;
 background-color: yellow;
 width: 100px;
 float: right;
}
#second-div {
 color:red;
 background-color: blue;
 width:100px;
}

Code for “Float” property

The output of the “Float” property

Now try playing with the float property and assign it left or right to different divs and see the difference.

What if we put a paragraph that is not floating!

<div id=”first-div”>
 <p>This is some green text.</p>
</div>
<div id=”second-div”>
 <p>This is some red text.</p>
</div>
<p>This paragraph is not floated.</p>

The paragraph which is not floating will try to fit itself in the flow of the page and as you squeeze the page it will adjust itself in the flow and finally will fit at the bottom of all elements.

With no float element code

With no float element output

Now, what if want to put some content under the float! We use “clear” property here.

#first-div {
 color: green;
 background-color: yellow;
 width: 100px;
 float: right;
}
#second-div {
 color:red;
 background-color: blue;
 width:100px;
}
#no-float {
 clear: both;
}

Here you will see options like clear left float or clear right float or clear both. To put the content under all float divs we will use here clear both.

Clear Float Code

Clear Float Output

Instructor ~ TARUN KUMAR

LAZY SYNTAX