清除 <li> 内浮动元素的正确方法答案

【问题标题】：Correct way to clear floating elements inside <li>清除 <li> 内浮动元素的正确方法
【发布时间】：2013-07-01 20:46:04
【问题描述】：

<ul style="overflow-y: auto;">
    <li><img style="float: left;"/>some text...</li>
    <li><img style="float: left;"/>some text...</li>
    <li><img style="float: left;"/>some text...</li>
</ul>

这里有必要使用某种 clearfix 吗？还是每个浮动的<img/>只影响其对应的<li>的内容？

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

【问题讨论】：

Which method of 'clearfix' is best? 的可能重复项
@feeela 一点也不，tbh。我不是要求“最好的”clearfix，我想知道浮动图像如何影响列表元素中的其余内容。

标签： html css

【解决方案1】：

默认情况下不包含浮点数。如果图片比<li>高，它们会将下面<li>的内容向右推（向左浮动）。

clearfix 的一些替代方法可以强制一个新的块格式化上下文。 LI 会延伸到它们的内容，所以一种流行的方法是：

li {
    overflow: hidden;
}

比较 http://jsfiddle.net/NvHVa/ 与 http://jsfiddle.net/NvHVa/1/

触发块格式化上下文的其他方式：https://developer.mozilla.org/en-US/docs/Web/CSS/Block_formatting_context

如需解释和更好的方法，请查看http://colinaarts.com/articles/float-containment/

【讨论】：

那么……你有什么建议？
也浮动li，或者给他们overflow:auto ...
@CBroe 我在问题中发布的 clearfix 类怎么样？
@Johan 检查我答案中的最后一个链接，它解释了为什么 clearfix 通常是一个坏主意。
@Johan 阅读整行，上面写着overflow: hidden; /* For modern browsers and IE7 */

【解决方案2】：

overflow:auto; 看起来像在这里工作...我认为正确的方法是将 img 作为 li 图像.. 但是 w/e ;D

演示： http://jsfiddle.net/goodfriend/EsgVH/14/

HTML：

<ul>
    <li><img>some texsome text.. some text.. some text.. some text.. t...</li>
    <li><img>some text.. some text.. some text.. some text.. some text.. somesome text.. some text.. some text.. some text.. some text.. some text.. some text.. some text.. some text.. some text..  text.. some text.. some text.. .</li>
    <li><img>some tesome text.. some text.. xt...</li>
</ul>

CSS：

img{
    float:left;
    width:50px;
    height:50px;
    border: 1px solid blue;
    margin-right:5px;
}

li{
    overflow-y:auto; // or just the overflow:auto;
    margin-bottom:5px;
}

【讨论】：