清除不相关元素上的浮动清除

Question

我想我让代码说话：

.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>

这是我遇到的问题：第一个列表条目清除到父-父 div 旁边，而不是 div 本身的内容。（如果您看不到问题，只需缩小浏览器范围 window。）我真的无法解决这种情况。尝试使用相对定位等。尝试通过手动清除浮动来修复它。但没有任何帮助。

对我来说，这是一种我从未见过的非常奇怪的行为。但我相信 CSS 负责人可以告诉我问题是什么以及如何解决它。

Answer 1

这看起来像是您使用的 clearfix class 的问题。它试图从内部清除浮动元素。所以，如果没有清除并且只清除本地浮动，那么这个问题就不会发生：

.main ul li {overflow: hidden;}

给出上面的代码将在本地清除浮动。

.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>

Answer 2

修复它的正确方法是建立 block formatting contexts (BFC)。

常见的建立方式有：

将 overflow 设置为 visible 以外的任何值，例如hidden
采用out of flow（浮动或绝对定位）
将 display 设置为 inline-block、table-cell 或 table-caption

为了避免那些 hacky 方法，Display L3 引入了 display: flow-root，它的行为类似于 block，但建立了一个 BFC。那将是完美的，但遗憾的是浏览器还不支持它。

然后，您可以在

中建立一个BFC

.main，例如

.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，例如

.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，例如

.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，例如（重叠）

.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>

清除不相关元素上的浮动清除

Clearing floating clears on an unrelated element

html

css

floating

css-float

clearfix