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

<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