Question

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

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

Answer 2

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

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

清除<li> </li>中的浮动元素的正确方法

2 个答案:

HTML：

CSS：