Clearing floating clears on an unrelated element

Question

I think I let code speak:

.aside {
    float: right;
    width: 200px;
    background: red;
}

.main {
    margin-right: 220px;
}

.main ul li {
    border-bottom: 1px solid black;
}

.main ul li img {
    float: left;
}

/* clearfix */
.clearfix:before,
.clearfix:after {
 content: " ";
 display: table;
}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

<div class="aside">
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
</div>
<div class="main">
    <ul>
        <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 1</div></li>
        <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 2</div></li>
        <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 3</div></li>
        <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 4</div></li>
    </ul>
</div>

This is the problem I have: The first list entry clears to the parent-parent div aside and not to the content inside the div itself. (If you can't see a problem just narrow down your browser window.) And I'm really unable to fix this situation. Tried it with relative positioning etc. Tried to fix it with manually clear the floats. But nothing helps.

To me it looks like a very strange behavior I've never seen before. But I'm sure a CSS chief can tell me what's the problem and how to work around it.

Can you add a sketch or something to show the desired behavior? — Oriol, Aug 29 '15 at 17:15
@Oriol He showed it perfectly in the snippet. What else would you expect? — Praveen Kumar Purushothaman, Aug 29 '15 at 17:15
@PraveenKumar The snippet shows the undesired behavior, but I don't understand the desired one. Clearing means preventing an element from being adjacent to previous floated one. In "clear to the content inside the div itself" I don't know which element is not supposed to be adjacent to which one. — Oriol, Aug 29 '15 at 17:29
@Oriol The desired result should look like @PraveenKumar's answer. But without `overflow: hidden` if possible. — TiMESPLiNTER, Aug 29 '15 at 18:17

score 1 · Answer 1 · answered Aug 29 '15 at 17:13

This looks like a problem with the clearfix class that you use. It tries to clear the floated element from the inside. So, if that doesn't clear and it clears just the local floats, then this problem will not happen:

.main ul li {overflow: hidden;}

Giving the above code will clear the floats locally.

.aside {
  float: right;
  width: 200px;
  background: red;
}

.main {
  margin-right: 220px;
}

.main ul li {
  border-bottom: 1px solid black;
}

.main ul li img {
  float: left;
}

.main ul li {overflow: hidden;}

<div class="aside">
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
</div>
<div class="main">
  <ul>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 1</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 2</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 3</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 4</div></li>
  </ul>
</div>

Thx for your answer :-). So this is a clean solution in your opinion then? I stopped using overflow: hidden because it feels somehow a bit hacky but in this case it will do the trick. — TiMESPLiNTER, Aug 29 '15 at 17:52
@TiMESPLiNTER This is the normal solution used by everyone when you cannot use clearfix. I wouldn't say that it is a clean solution or hacky solution. But yes, this is the best solution for now. — Praveen Kumar Purushothaman, Aug 29 '15 at 18:46

Oriol · Accepted Answer · 2015-08-29T23:27:22.183

The proper way of fixing it is by establishing block formatting contexts (BFC).

The common ways to establish them are:

Setting overflow to anything but visible, e.g. hidden
Taking out of flow (floating or absolute positioning)
Setting display to inline-block, table-cell or table-caption

To avoid those hacky ways, Display L3 introduces display: flow-root, which behaves like block but establishing a BFC. That would be perfect but sadly browsers don't support it yet.

Then, you can establish a BFC in

.main, e.g.

.main {
  overflow: hidden; /* Establish BFC */
}

.aside {
  float: right;
  width: 200px;
  background: red;
}
.main {
  margin-right: 220px;
  overflow: hidden;
}
.main ul li {
  border-bottom: 1px solid black;
}
.main ul li img {
  float: left;
}
/* clearfix */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

<div class="aside">
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
</div>
<div class="main">
  <ul>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 1</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 2</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 3</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 4</div></li>
  </ul>
</div>

.main > ul, e.g.

.main > ul {
  display: inline-block;    /* Establish BFC */
  width: calc(100% - 40px); /* Full width (minus padding) */
  padding-left: 40px;
}

.aside {
  float: right;
  width: 200px;
  background: red;
}
.main {
  margin-right: 220px;
  overflow: hidden;
}
.main > ul {
  display: inline-block;    /* Establish BFC */
  width: calc(100% - 40px); /* Full width (minus padding) */
  padding-left: 40px;
}
.main ul li {
  border-bottom: 1px solid black;
}
.main ul li img {
  float: left;
}
/* clearfix */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

<div class="aside">
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
</div>
<div class="main">
  <ul>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 1</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 2</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 3</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 4</div></li>
  </ul>
</div>

.main > ul > li, e.g

.main > ul > li {
  float: left; /* Establish BFC */
  clear: left; /* Prevent adjacency */
}

.aside {
  float: right;
  width: 200px;
  background: red;
}
.main {
  margin-right: 220px;
  overflow: hidden;
}
.main ul li {
  border-bottom: 1px solid black;
  float: left;
  clear: left;
}
.main ul li img {
  float: left;
}
/* clearfix */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

<div class="aside">
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
</div>
<div class="main">
  <ul>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 1</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 2</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 3</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 4</div></li>
  </ul>
</div>

.main > ul > li > .clearfix, e.g (with overlapping)

.main > ul > li > .clearfix {
  position: absolute; /* Establish BFC */
}

.aside {
  float: right;
  width: 200px;
  background: red;
}
.main {
  margin-right: 220px;
  overflow: hidden;
}
.main ul li {
  border-bottom: 1px solid black;
}
.main > ul > li > .clearfix {
  position: absolute;
}
.main ul li img {
  float: left;
}
/* clearfix */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

<div class="aside">
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
</div>
<div class="main">
  <ul>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 1</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 2</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 3</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 4</div></li>
  </ul>
</div>

The method with the `float: left; clear: left; ` did the trick. Awesome :-). Thx. — TiMESPLiNTER, Aug 29 '15 at 22:27

Clearing floating clears on an unrelated element

2 Answers2