web-dev-qa-db-ja.com

bootstrapのクラスclearfixの問題

Twitterブートストラップを使用していますが、ブートストラップのclearfixクラスに問題があります。私のhtmlは：

<div class="pull-left">This is a text</div>
<hr class="clearfix" />

私が期待しているのは、表示されたテキストの次の行に水平線が来るはずですが、テキストの右側に表示されることです。そして、hrでstyle='clear: both;'を使用すると、うまく動作します。なぜclearfixはclear: bothと同じことをしないのですか？

javascriptcsstwitter-bootstrapclearfix
16
user1740381

クラスclearfixを親コンテナ要素に適用する必要があります

<div class="clearfix">
    <div class="pull-left">This is a text</div>
</div>

デモ： Plunker

40
Arun P Johny

以下を試してください：

<div>
    <div class="pull-left">This is a text</div>
    <div class="clearfix" />
</div>
<hr />

この場合、空のクリアdivがプル左divの右側に配置され、クリアされます。
問題は、エレメントでfloat: leftを使用すると、フロートになり、そのスペースに空きがある場合は右に配置された次のエレメントになります。したがって、float: left（たとえばpull-left）でフロートにする必要があるすべての要素を行に配置し、float: none; clear: both（たとえばclearfix）でこのシーケンスを閉じて停止する必要がありますフローティング。

8
Sergey Metlov