Html 清除内部浮动元件的正确方法<；李>；

默认情况下不包含浮动。如果图像比

高，它们会将以下

的内容推到右侧（左侧浮动）

clearfix的一些替代方案可以是强制使用新的块格式上下文。LIs将扩展到其内容，因此一种流行的方法是：

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

比较

触发块格式上下文的其他方法：

---

有关说明和更好的方法，请查看溢出：自动看起来像在这里工作。。。我认为正确的方法是将img作为li图像。。但w/e；D

演示：

HTML:

---

所以你的建议是什么？同时浮动li，或者给它们

溢出：auto

。@CBroe我在问题中发布的clearfix类怎么样？@Johan查看我答案中的最后一个链接，它解释了为什么clearfix通常是个坏主意。@Johan阅读了整行内容，它特别指出

溢出：隐藏；/*对于现代浏览器和IE7*/

来说，@feeela的可能副本根本不是，tbh。我不是在要求“最好的”clearfix，我想知道浮动图像如何影响列表元素中的其余内容。

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

li {
    overflow: hidden;
}

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

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;
}