
The Problem with floats
The very first problem with using floats is that if all the child elements of a container are given a float value, then the parent element gets a height of ZERO.This means that the border of the parent element will not be applied properly, you will have a very hard time using the heights in javascript animations or calculations.
Check out the following code and what it will look like without any clearfix.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<style> *{ font-family:verdana; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; color:#686868; } .parent{ border:1px solid rgb(145, 145, 145); width:90%; margin:30px auto; border-radius:5px; } .child{ background:rgb(167, 235, 238); width:50%; float:left; padding:10px 5px; } .parent:last-child{ background:rgb(146, 207, 146); margin-top:80px; padding:20px; } </style> <body> <div class="parent"> <div class="child">This is the child element 1</div> <div class="child">This is the child element 2</div> </div> <div class="parent"> Notice the deformed border on the above element. </div> </body> |
DEMO
This is the child element 1
This is the child element 2
Notice the deformed border on the above element.
I hope you see the problem :D, and if you are wondering what style I applied to the * then you should read this post.
How to fix the problem with floats
-
Insert a clear div: This is an old method but works very well. What you do is put a div after the floated elements like <div class=”clear”></div> and then give it styling as such.
12345.clear{display:block;clear:both;width:100%;}
-
Add overflow and width to the parent element: Consider this styling for the parent element:
12345.parent{border:1px solid rgb(145, 145, 145);width:90%;overflow:auto;}
Now, what troubled me when I found this solution was that the overflow property has a default value of auto, so why doesn’t this trick work by default. I am still looking for a valid answer but apparently CSS works this way
P.S. The credits for this go to quirksmode who apparently saw it from somewhere else. -
Use the :after pseudo class: This is my favourite, partly because I didn’t read it somewhere else, discovered it on my own( really not boasting
).But anyway, here it is:
123456.parent:after{content:'';width:100%;display:block;clear:both;}
After applying any of the above fixes, you should see the following result:
DEMO
This is the child element 1
This is the child element 2
Notice the border on the above element is now fine.
Well, sometimes the issues with floats are not visible to use maybe due to the architecture we used, and even when we are facing the mentioned problem, one technique might favour the situation more than other. So, you should be aware of what all ways are present to tackle your problem.
There might be easier methods to achieve the required effect and if you do know some other method or found some problem with the ones mentioned above, please share them with us!
Follow Us