How to use "clearfix" css in nested blocks?

Question

I'd found, that css "clearfix" example not work properly when there are nested float:left blocks.

Here is an example:

.left {
  float: left;
  width: 100px;
  height: 200px;
  background: green;
}

.right {
  margin-left: 100px;
  background: yellow;
}

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

ul.clearfix {
  padding: 10px;
}

.clearfix li {
  float: left;
  list-style: none;
  border: 1px solid red;
}

<div class="left">
  Image
</div>
<div class="right">
  <ul class="clearfix">
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
  <p>Some description</p>
</div>

It shows, that text "some text" appears quite under "left" block. While there presents huge space after list of elements with "clearfix" css. Any ideas to fix it?

the clearfix is clearing the `left` element so logically the p will be showun under it and inside the right. Logic but not intuitive — Temani Afif, Jan 20 '20 at 09:53
By the logic, can it dismiss the difference between parent containers? In example, left and right blocks - are different containers. — eurobax, Jan 20 '20 at 10:23
It seems you are trying to put two element next to each other. There are better alternatives than `float` to achieve this. Take a look at `display: flex` — yunzen, Jan 20 '20 at 10:42

score 0 · Accepted Answer · answered Jan 20 '20 at 10:36

In this particular case you can make the p inline-block and you will not need clearfix (at least inside the right element). You may need to clear after the right element if you will have more content.

.left {
  float: left;
  width: 100px;
  height: 200px;
  background: green;
}

.right {
  margin-left: 100px;
  background: yellow;
}

ul.clearfix {
  padding: 10px;
}

.clearfix li {
  float: left;
  list-style: none;
  border: 1px solid red;
}
p {
  display:inline-block;
  width:100%;
}

<div class="left">
  Image
</div>
<div class="right">
  <ul class="clearfix">
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
  <p>Some description</p>
</div>

score 0 · Answer 2 · answered Jan 20 '20 at 11:43

You can use CSS clear: both; for your paragraph

.left {
  float: left;
  width: 100px;
  height: 200px;
  background: green;
}

.right {
  margin-left: 100px;
  background: yellow;
}

.list:after {
  content: ' ';
  display: table;
  clear: both;
}


.footer{ clear: both;}

.list li {
  float: left;
  padding: 10px;
  list-style: none;
  border: 1px solid red;
}

<div class="left">
  Image
</div>
<div class="right">
  <ul class="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>
<div class="footer"><p>Some description</p></div>

No, in my case text should be in yellow block, just under list A B C, without any space. — eurobax, Jan 20 '20 at 11:47

score 0 · Answer 3 · answered Jan 20 '20 at 11:59

So, my estimations about float:left in different containers are mistake. Float property puts all blocks in one flow, regardless their containers. So, meaning "nested" blocks towards this float blocks is useless.

The other problem is - that container has no size without clearfix. The solution is - to set ul.overflow:hidden

How to use "clearfix" css in nested blocks?

3 Answers3