1

これは非常に紛らわしいです。BootStrapのclearfixクラスを使用してフッターをクリアしようとしていますが、機能していません。私のコードは以下の通りです：

<div>
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="footer clearfix">Footer</div>
</div>

.left {
    background-color: red;
    float: left;
}

.right {
    background-color: blue;
    float: right;
}

.footer {
      background-color: orange;
}

// Clear fix
.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

私はここにフィドルを持っています：http：//jsfiddle.net/RYYFw/3/

この単純な清算が機能しない理由を教えてください。

4

4 に答える 4

4

clear: bothフッターに追加する必要があります：

.footer {
    background-color: orange;
    clear: both;
}

更新されたjsFiddleを参照してください。

于 2013-03-25T10:09:00.430 に答える
0

clear:both.footerに追加

.footer {
      background-color: orange; clear: both;
}

デモ

于 2013-03-25T10:10:14.983 に答える
0

clearfix通常は、フロートされている内部の要素に基づいて親コンテナに高さの値を与えるために使用するため、機能しません。

使用する必要があるのはclear: both;

したがって、フッターに適用する必要があります。

.footer {
  background-color: orange;
  clear: both;
}
于 2013-03-25T10:13:20.850 に答える
0

問題のクリーフィックスは、あなたが思っているものとは異なります。

この状況では、ブートストラップclearfixは、clearfixクラスを持つすべての浮動要素が適切な高さを持つことを意味します（デフォルトでは、浮動要素が非浮動要素内にある場合、非浮動要素の高さは0になります）

（はるかに優れたhttp://css-tricks.com/all-about-floats/）

必要なのは、次のようにフッターをクリアする方法です。

.clear { clear: both; }

このclearプロパティは、フロート要素がその要素のいずれの側にも許可されていないことを意味します（左右に割り当てることもできます）

于 2013-03-25T10:15:00.430 に答える