Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Basic Layout Clearing Floats

Peter Hsiao
Peter Hsiao
2,086 Points

What Does Setting Float Declaration to Parent Div Do to Child Divs?

Hi Everyone!

This is about the video Clearing floats. The HTML structure pertaining to my question is:

<div class="secondary-content"> <div class="resorts"> etc etc etc... </div>

<div class="tips">
      etc etc etc.....
</div>

</div>

In the video, Guil applies the clearfix declaration block to the class "secondary-content," which cleared "resorts" and "tips" columns. But I'd like to know why it does that?

I'm starting to grasp the clear float declaration but still not 100% sure what effects it'd have if applied to parent div vs. child div as Guil demonstrated.

This video (https://www.youtube.com/watch?v=xara4Z1b18I) helped me understand clear float, but that video was a very simple demonstration. It didn't demonstration what effects clear float would have if there are divs inside a parent div.

I hope my question isn't too confusing!

Thanks!

3 Answers

Hossam Khalifa
Hossam Khalifa
17,200 Points

There will be no effect on it it will just fit itself in the parent clear fixed element and it may have change the parents width or height but I will not go out of the scope of the element

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,417 Points

As Hossam mentioned, the children of a floated element will behave completely normally within the context of their parent. Adding a clearfix when you have a floated containing element and non-floated children still adds a pseudo element, but since there is nothing to clear it doesn't effect the layout.

For example, if you have the following markup (with Guil's clearfix added)...

    <div id="parent" class="group">
      <div class="child">One</div>
      <div class="child">Two</div>
      <div class="child">Three</div>
    </div>

... and you have the following CSS...

#parent { float: left; }

/* Clearfix */
.group:after {
  content: "";
  display: table;
  clear: both;
}

You'll still have the pseudo element added to #parent, but the children will behave normally.

If you were to inspect the HTML once it is rendering in your browser, you'll see something like this:

    <div id="parent" class="group">
      <div class="child">One</div>
      <div class="child">Two</div>
      <div class="child">Three</div>
      ::after
    </div>
Peter Hsiao
Peter Hsiao
2,086 Points

Thanks Hossam and Jeff.

Jeff, going on with your explanation, what if the floats were the child divs, as Guil put it? He had a parent div with class secondary-content, and inside it were child elements with classes resorts and tips. And he floated one child div left, and one child div right.

Then he used clearfix on the parent div.

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,417 Points

Let's start with the same HTML we were looking at before:

    <div id="parent" class="group">
      <div class="child">One</div>
      <div class="child">Two</div>
      <div class="child">Three</div>
    </div>

No floats

If neither the child elements or the parent element are floated, your CSS might look something like this:

/* Clearfix */
.group:after {
  content: "";
  display: table;
  clear: both;
}

Since nothing is being floated, the clearfix will have no effect on the layout (although a pseudo element is still added to the markup). The parent element will continue to contain the child elements.

A floated parent, non-floated children

This is the case that we looked at earlier when we used CSS that looked like this:

#parent { float: left; }

/* Clearfix */
.group:after {
  content: "";
  display: table;
  clear: both;
}

Floating elements takes them out of the normal flow of the document. As MDN puts it:

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

So, if you float the parent (and only the parent), the children will follow along with their parent. They'll behave normally within the context of their containing element (the parent). The parent element is removed from the normal flow of the document, which allows other elements in the document to wrap around it. The space it would have normally taken up if it were not floating is no longer reserved for the parent. Adding a clearfix to the parent element will add that pseudo element, but it won't affect your layout since there is nothing to clear.

Everybody is floated!

If you float the parent and the children, a similar thing happens: the children follow along with their parent and float within the context of their parent.

#parent,
.child { float: left; }

/* Clearfix */
.group:after {
  content: "";
  display: table;
  clear: both;
}

The parent is removed from the normal document flow, and the children are removed from their normal flow. The parent in this example will end up on the left side of the document and the children will stack up from the left within the context of the parent. That's because floated elements shift to the left (or right) until they hit the edge of their containing box or another floated element (as of CSS 2.1).

Since the parent is floated, it expands enough to contain all of its floated elements. Again, adding the clearfix to the parent element will add the pseudo element after all of the children. Because all of the children are already contained by the floated parent, the clearfix won't have any affect on your layout.

Only the children are floated

The final case is when all of the children are floated, but the parent element is not.

.child { float: left; }

/* Clearfix */
.group:after {
  content: "";
  display: table;
  clear: both;
}

The child elements are removed from the normal document flow, effectively giving their parent a height of 0. The parent collapses. This behavior is actually by design (Eric Meyer had a great article about this in 2003). So this is a situation where the clearfix will affect your layout.

The clearfix inserts a pseudo element after all of the rest of the children (but still within the parent). The element clears the children, forcing the parent element to expand enough to contain them.

A side note: This is actually a fairly recent version of the clearfix. It supports IE8 and up. CSS Tricks has a list of many of the previous versions, and Nicholas Gallagher's article will give you a good sense about why they work. End side note

Hossam Khalifa
Hossam Khalifa
17,200 Points
<div class="group contain">
<div style="float:left;">
 <h1>I am a clearfixed float</h1> 
 <p>The element I am in is clearfixed so I stay in it</p>
 <p>I am floated left</p>
</div><div style="float:right;">
 <h1>I am a clearfixed float</h1> 
 <p>The element I am in is clearfixed so I stay in it</p>
<p>I am floated right</p>
</div>
</div>

Css of parent

.group::after {
  content: "";
  clear: both;
  display: table;
}

.contain {
  margin-top: 300px;
  display: block;
  background: #50555e;
}

Both of the elements are floated normally one on the left and one on the right and both of them stay within the scope of the clear fixed element.

I hope this makes it clear,if not please ask again