Why do we loose parent styles when we use floats in css?

Question

I know float is no more used and is replaced by flex but just curious to know why does it loose parent styles when implemented.

Example:

h1 {
  margin: 0;
}

.container {
  background-color: tan;
}

.one,
.two,
.three {
  float: left;
  width: 300px;
  height: 200px;
  text-align: center;
  padding: 7px;
  background-color: thistle;
  border: 1px solid slategrey;
}

<div class="container">
  <div class="one">
    <h1>Section 1</h1>
  </div>
  <div class="two">
    <h1>Section 2</h1>
  </div>
  <div class="three">
    <h1>Section 3</h1>
  </div>
</div>

In the above example the background color of container div doesnt work anymore after float is imoplemented !

Float takes the element out of the document flow. – Gerard Sep 12 '20 at 07:30 — Gerard, Sep 12 '20 at 07:30
So basically elements forgets where to lye in the document. – neeraj tk Sep 12 '20 at 07:32 — neeraj tk, Sep 12 '20 at 07:32

score 2 · Answer 1 · answered Sep 12 '20 at 07:36

That's because elements that you have assigned 'display: float' to are now floating. They are taken outside of the normal document flow.

If you still want to use float you'll need to use clear.

h1 {
  margin: 0;
}

.container {
  background-color: tan;
}

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

.one,
.two,
.three {
  float: left;
  width: 300px;
  height: 200px;
  text-align: center;
  padding: 7px;
  background-color: thistle;
  border: 1px solid slategrey;
}

<div class="container clearfix">
  <div class="one">
    <h1>Section 1</h1>
  </div>
  <div class="two">
    <h1>Section 2</h1>
  </div>
  <div class="three">
    <h1>Section 3</h1>
  </div>
</div>

But it's not recommended to use float for designing layout. You can read more about it here: What is a clearfix?.

Why do we loose parent styles when we use floats in css?

1 Answers1