7

デモ

使用clearfix techniqueは非常に便利ですが、デモに示されているように、この方法を使用すると余分なパディング値が増加するという問題があることを誰もが示しています。

両方の高さは同じです。

CSS: 

body{margin: 0; padding: 0;}
#wrap{width: 900px; height: 250px; background: red; margin: 0 auto;}
.clearfix:before, .clearfix:after{content: "."; display: table;}
.clearfix:after{clear: both;}
.clearfix{zoom: 1;}
#box{float: left; width: 200px; height: 250px; background: blue;}

HTML: 

<div id="wrap" class="clearfix">
<div id="box"><h1>some heading text here</h1></div>
</div>
4

2 に答える 2

3

ヤクブが言っただけです。 .clearfix:before, .clearfix:after{content: "."; display: table;}要素の前後にピリオドを追加しています。むしろ、次のコードを使用してください。

.clearfix:before, .clearfix:after{content: " "; display: table;}

または、別の方法として、次のコードのみを使用します。

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
于 2013-03-28T04:56:21.027 に答える
1

あなたが発行するのはこれだけです：

.clearfix:before

.CSS で設定しているのと同じように前面に貼り付けることを追加すると、それを. 削除すると正常に動作しますclearfix:after

于 2013-03-28T04:53:41.897 に答える