Hi I’m learning how to use floats. At the moment I’m looking into the clearfix method. I just wondered if I was using it correctly. I’m using it on the parent container.
And also if I have a container surrounding my text called .data . I have an overflow: auto for this container. If I take that overflow:auto then the width goes to a full width which isn’t great for the padding.Why is this and also I thought this what the clearix was meant to stop?
Try reading this page and see if it helps.
or maybe this:
When you add overflow (other than visible) to an element it creates a new block formatting context and in that context the background of an element does not slide under the float but will create a rectangular block to the side of any floated content (assuming there is room). This is what happens when you add overflow:auto to your element called ,data and therefore the element’s background no longer slides under the float. It also means that your text will no longer wrap around and under the float should the text content be long enough to do so. Just add a background color to .data and then test with and without the overflow to get a clearer picture of what is going on.
Clearfix has nothing to do with the above and is mainly a means of containing a float within a parent element. floats are removed from the flow so an element that contains olny floats will have no height and no background will show. If you add a clearfix to the parent container then it suddenly recognises the floated content and the background will extend around the floated elements. Again add a background color to a parent element and then test with and without clearfix to see this in evidence.
Floats are complicated beasts but the rules are clear if verbose. 
As an aside, hacks like clearfix are redundant now, as there are finally proper layout tools in CSS — like display: grid and display: flex — that mean float can return to its appropriate role (such as letting text wrap around an image).
So I shouldn’t use clearfix?
Yes by all means use it when needed but rather than use floats for layout use one of the more modern methods instead and then you won’t need clearfix.
Just use floats when you want something to the side rather than trying to create columns.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.