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

ここである種のクリアフィックスが必要ですか？それとも、各フローティング<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;  
}
4

2 に答える 2

2

フロートはデフォルトでは含まれていません。画像の高さが よりも高い場合、<li>次のコンテンツが<li>右に押し出されます (float left of)。

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/をご覧ください。

于 2013-07-01T12:31:23.860 に答える