1

In this thread: What is a clearfix?

I saw the best answer says the clearfix can be added directly to the last floating element:

With clearfix, you only need to

write HTML code:

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
</div>

and CSS code: 

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

However, when I tried to add clearfix to the floating element, it doesn't work at all (as can be seen in the snippet below) :

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

div#container {
    background-color: green;
    width: 50%;
    display: block;
    margin: auto;
}
.floating {
    float: left;
    margin: 1px;
    background-color: yellow;
}
<div id="container">
    <div class='floating'>1</div>
    <div class='floating clearfix'>2</div>

</div>

As can be found in the result, the #container's height is still 0. It seems that the clearfix doesn't work and cannot be added to the last floating element directly. Is it true? Does anyone have ideas about this?

Community
  • 1
  • 1
Hanfei Sun
  • 45,281
  • 39
  • 129
  • 237
  • 1
    Where did you see "clearfix can be added directly to the last floating element"? – Stickers Oct 14 '15 at 20:40
  • @Pangloss In the code he pasted: `
    Sidebar
    ` , which I couldn't fully understand. I think Sidebar should be a floating element as well as a container of floating elements..     – Hanfei Sun Oct 14 '15 at 20:41
  • It has clearfix class sets on both the container and the floating element, I believe the 2nd one doesn't do anything. `:after` inserts a pseudo element at the end of the element, but it is still **inside** the element itself. – Stickers Oct 14 '15 at 20:47
  • @hanfeisun I think the poster applied the `.clearfix` class by accident to the wrong element. They did apply it to the parent DIV of the sidebar DIV which would be correct and be in-line with some of the answers posted to your question. – hungerstar Oct 14 '15 at 21:05

2 Answers2

4

You've to use the clearfix on the container.

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

div#container {
    background-color: green;
    width: 50%;
    display: block;
    margin: auto;
}
.floating {
    float: left;
    margin: 1px;
    background-color: yellow;
}
<div id="container" class="clearfix">
    <div class='floating'>1</div>
    <div class='floating'>2</div>

</div>
Xahed Kamal
  • 2,203
  • 1
  • 20
  • 41
3

You need to add the :after element that should clear the children at the end of the container, not inside the floating element itself. All you have to do is give the container the class clearfix, like this:

<div id="container" class="clearfix">
    <div class="floating">1</div>
    <div class="floating">2</div>
</div>
Gust van de Wal
  • 5,211
  • 1
  • 24
  • 48