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本身内容。（如果你看不到问题只是缩小浏览器窗口的范围。）而我真的无法解决这种情况。尝试相对定位等尝试用手动清除浮子来修复它。但没有任何帮助。

对我来说，这看起来像是一种我以前从未见过的非常奇怪的行为。但我确信CSS主管可以告诉我问题是什么以及如何解决它。

Answer 1

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

.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

为了避免这些骇人听闻的方式，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>

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

2 个答案: