Every web designer / developer has a preferred method for clearing their floats. I’m partial to simply tacking on a class of “clearfix” to a parent element which has floated children. Below is the CSS code for this “clearfix” method. If you are unable to copy and paste the code below, here is a link to a plain text file with the same code.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
If you prefer to watch video lessons instead of reading written lessons check out my 8 hour video course and learn pro-level HTML, CSS, and responsive design.
Great tutorial… very useful
Thank you for these tips. I’m slowly understanding how to put all of this together!
Qeustion (and sorry if this isn’t the best location for this question). Is the following correct or not?
A CLASS is something that can effect more than one element on a page wheereas an ID can only effect one element on the page.
And a CLASS has to be preceded by a period (.class) whereas an ID is preceded by a hastag (#id).
But containers refer a in an thml doc. And a container is also preceded by a hashtag.
But containers are not selectors where as CLASS and ID are.
So a container, even though it is preceded by a hashtag, is only a grouping of CLASS and or ID selectors in a specific region in an html file?
And a CLASS and or ID can live inside or outside a container?
Thanks,
Jeremy
Hi Jeremy,
Yes, a CLASS can be assigned to multiple elements on a page.
An ID should only be assigned to a single element on the page.
You are also correct that a CLASS is preceded by a period (.class) and an ID is preceded by the pound sign (#id).
However, I’m not sure what you are referring to when you mention “containers.” Are you referring to a div with a class or and ID of “container.” That is just a convention designers commonly use to position and/or center a large chunk of content.
In your HTML code you can nest a div inside of a div. You can also nest an unordered list inside an unordered list. There are plenty of examples of elements that can be nested. You can then use descendent selectors in your CSS to target specific elements. For example if we had a div with a class of “navigation” and it had two levels of links (parent and children) we could write a selector like the following to target and style the children links:
.nav ul li ul li a
I hope this answers some of your questions. If not, just let me know.
Thanks!
Brad
This tutorial is going to be very helpful for me. Thank you Brad.
Hi,
Your tutorials are very easy to understand. I have learned CSS Lesson 4,5 and 6. But this lesson (Clearing CSS Floats – Clearfix) confused me. I have not understand:
” content: “.”; display: block; clear: both; visibility: hidden; ”
Can you teach me about these elements?
The code that you included is used to add a period (.) to the end of the element, and then set it to “clear” any floated siblings above it, and finally set it to visibility hidden so the period is invisible. The idea behind the clearfix method is to make sections of content “self sufficient” so they aren’t reliant on an element below them to clear their floats.
An alternative to the clearfix method is to simply make sure there is a sibling after the floated elements and that it has the property “clear: both;”
I’ve created a video tutorial on this topic:
https://learnwebcode.com/understanding-css-floats/
Thanks!
Brad
I wanna say thank you, your tutorials are awesome.
Hi Brad,
Thanks a ton. Tutorials were extremely understandable for me before this chapter. But stuck up in this point. Can you pls help?? I am newbie for programming
I cannot understand the purpose of clearfix. I need clarifications on
1. what is the purpose of clearfix – why it is used
2. for what type of data this clearfix can be used
3. can you pls show with an visual example with a code?
Hi Fala,
Let’s use the top dark green navigation bar on this very website as an example to understand “clearfix.”
Each link in the navigation lives in a “list item” or “li” element. By default list item elements want to sit one per line and stack on top of each other. In order to get them to all sit on one horizontal line side-by-side we “float” them to the left.
However, once you float an element you are taking it out of the normal flow of the page. This means the ancestor elements of the list items don’t know how much space the list items are taking up any longer. So if we didn’t use the clearfix on the top navigation menu the dark green area wouldn’t be visible at all, since it wouldn’t be aware of the size of its contents because they are all floated.
In order to make the dark green bar aware of how much space its contents are taking up even though they are floated we need to “clear” out floats. And that’s all the clearfix is doing – clearing floats without an extra empty DIV in our HTML. Instead of the clearfix, we could simply include an empty DIV after our list-items and use a CSS declaration and assign the empty div “clear: both;” but that results in messy HTML.
I hope that helps. A useful experiment is to play with floats and try to set a background color on a parent container element and see if you can get the parent element to be aware of the size of the floated elements.
Thanks!
Brad
Hi Brad,
what if i don’t use list element? Would that be a problem?
That would not be a problem. Any time one element contains other elements that are floated, you can use the “clearfix” method on the “parent” or “ancestor” element to clear the floats. I suggest experimenting with the clearfix approach on any type of elements that you need to use.
Many thanks to you Brad.. Clear now.. If anything, will come back with doubts.. Thanks again
Hi Brad,
Which HTML editor is good to use?? Can you pls suggest?
Thanks,
Fala.
Hi Fala,
I recommend the “Sublime Text” editor. It is free to download and evaluate for as long as you like. I have a 12-part tutorial on using Sublime Text on my YouTube channel (learnwebcode). Thanks!
Hi Brad
thank you,
your tutorials are awesome