【发布时间】：2015-11-24 03:37:43
【问题描述】：
我想我让代码说话：
.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 负责人可以告诉我问题出在哪里以及如何解决它。
【问题讨论】：
-
添加尝试将
clear: none;添加到浮动图像。 -
你可以添加一个草图或其他东西来显示所需的行为吗？
-
@Oriol 他在 sn-p 中完美展示了这一点。你还能期待什么？
-
@PraveenKumar sn-p 显示了不受欢迎的行为，但我不理解所需的行为。清除意味着防止一个元素与先前浮动的元素相邻。在“清除 div 本身内部的内容”中，我不知道哪个元素不应该与哪个元素相邻。
-
@Oriol 所需的结果应该类似于@PraveenKumar 的答案。但如果可能的话，不用
overflow: hidden。
标签： html css css-float floating clearfix