4

通常、コンテナdiv内にフローティング要素がある場合、次のようになります。

<div class="container">
  <div style="float: left;">content</div>
  <div style="float: left;">content</div>
  <div style="clear:both;"></div>
</div>

<div style="clear:both;"></div>流動的なレイアウトのすべてにそれを配置することは、非常に面倒で醜いことだと思います。だから私はこのようなことをしようとしました（cssを使用していますが、簡単にするために）：

<div class="container" style="clear:both;">
  <div style="float: left;">content</div>
  <div style="float: left;">content</div>
</div>

そして、動作しませんでした。.containerクラスに何かを追加することでそれを機能させることは可能ですか？

4

2 に答える 2

8 
.container {
    overflow: hidden; // causes the container to wrap its floated children
}
于 2011-04-06T11:24:15.727 に答える
4

編集:ここで説明されているように、clearfix の使用は特定の場合にのみ必要です。overflow: hidden が優れた方法です。

クリア要素を必要としないclearfixと呼ばれる手法があり、ブラウザ間の互換性に細心の注意を払って構築されています。これにより、多くのブラウザー固有の CSS が作成されますが、既存のスタイル シートに統合することができます。

于 2011-04-06T11:25:10.350 に答える