清除内部浮动元素的正确方法< li> [英] Correct way to clear floating elements inside <li>

问题描述

 < ul style =overflow-y：auto;> 
< li>< img style =float：left;/>一些文字......< / li> 
< li>< img style =float：left;/>一些文字......< / li> 
< li>< img style =float：left;/>一些文字...< / li> 
< / ul> 
  

在这里需要一些clearfix吗？或者每个浮动< img /> 只会影响其相应的< li> ？

  .clearfix：after {
 content：。; 
 display：block; 
 height：0; 
明确：两者; 
可见性：隐藏; 
} 
 .clearfix {
 display：inline-block; 
} 
 * html .clearfix {
 height：1％; 
} / *隐藏来自IE-mac \ * / 
 .clearfix {
 display：block; 
 
  

解决方案

默认情况下不包含浮动。如果图片比< li> 高，他们会推送以下内容< li> （右侧浮动）。

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

$ $ $ $ $ $ $ $ $溢出：隐藏;
}

比较 http://jsfiddle.net/NvHVa/ vs http：// jsfiddle.net/NvHVa/1/

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

有关解释和更好的方法，请查看 http：// colinaarts .com / articles / float-containment /

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

Is it neccessary with some kind of clearfix here? Or does each floating <img/> only affect the content of its corresponding <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;  
}

解决方案

Floats are not contained by default. If the images are taller than the <li>, they will push the content of the following <li> to the right (float left of).

Some alternatives to clearfix can be to force a new block formatting context. The LIs will stretch to their content, so a popular method is:

li {
    overflow: hidden;
}

Compare http://jsfiddle.net/NvHVa/ vs http://jsfiddle.net/NvHVa/1/

Other ways to trigger a block formatting context: https://developer.mozilla.org/en-US/docs/Web/CSS/Block_formatting_context

For an explanation and a better method, check out http://colinaarts.com/articles/float-containment/

这篇关于清除内部浮动元素的正确方法< li>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！