Learn the use of clear and float in CSS

After this tutorial you will surely learn the use of clear and float in CSS.
In the beginning of designing career, I faced so many problems in CSS. I didn’t know about the proper use of FLOAT. The FLOAT property specifies whether or not an element should float. If you want to float blocks from right, you can write FLOAT:RIGHT and If you want to float blocks from left, then you have to write is FLOAT:LEFT. But sometimes, when you start using float frequently, definitely you will face some issues.

 

For example:-

1. Design will not display properly.
2. Child block will not show inside parent block.
3. Parent block will smaller than child block.
I have made one example for you using code editor. Given below is the code-

 

In the given examples you can clearly see that the Issues and how to resolve these kind of issues. May be many people will not understand my example, So I am going to explain the examples, what I have done for you.

 

Issues you will face

I have made two examples. In first example you can clearly see that Child Block is out of Parent Block. If you see HTML its showing that Child DIV is inside Parent DIV, it means Child Block should show inside Parent Block in Design. So this is the first issue.
Second one is – Purple Block and Child block should be inside the Parent Block in Design and Purple block should be below the Child Block in Design. But the position of all the blocks are not proper. In HTML you can see Child Block DIV is inside Parent Block DIV and Purple block is below.

 

How to resolve

If you want to resolve these kind of problems then you have to use CLEAR property of CSS. As you can see in HTML code, I have added Empty DIV with CLEAR property of css and the result or design is perfectly fine. The clear property is used to control the behavior of floating elements. Elements after a floating element will flow around it. To avoid this, use the clear property.

 

Conclusion

So next time whenever you are going to use FLOAT property, remember to clear FLOATS.

 

Ajay Malhotra

UI Developer & Designer

Leave a Reply

Your email address will not be published. Required fields are marked *