1

余分なマークアップなしでフロート要素のセットをクリアフィックスする方法を見つける必要があります。

たとえば、に2列のグリッドがありsection#main_featuresます。それぞれdiv.featureが持っておりwidth: 50%、ですfloat: left。私が欲しいのは、余分なhtmlマークアップなしで行をクリアフィックスする方法を見つけることです（単純なセマンティックグリッドを作成したいので）。

<section id="main_features">
  <div class="feature">
    ...
  </div>
  <div class="feature">
    ...
  </div>
  <div class="feature">
    ...
  </div>
  <div class="feature">
    ...
  </div>
</section>

ここでの行は単なる「概念」であることに注意してください（各行は2つ.featureです）。私はこのグリッドを構築するためにセマンティックアプローチを使用しているので、各行の列をラップしてからこのラッパーをクリアフィックスする必要はありません。css（またはscss、lessなど）のみを使用して行をクリアフィックスおよびブレークするためのトリックを探しています。

この問題は見た目よりも複雑なようです。

前もって感謝します。

4

4 に答える 4

3

css:afterを使用してこれを行うには、その後に非表示の終止符を置き、明確な修正を強制するだけです。

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

あるいは、BeauSmithsの新しい回答をここで見つけました

/* For modern browsers */
.container:before,
.container:after {
    content:"";
    display:table;
}
.container:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.container {
    zoom:1;
}
于 2013-02-14T12:00:14.297 に答える
3

CSSTricksで見つけたセマンティックなgroup「microclearfix」を使用しています。

.group:after {
  content: "";
  display: table;
  clear: both;
}

CSSは上記のソリューションに似ていますが、「グループ化」してクリアを続ける任意の要素にCSSを追加できるという概念があります。例えば：

<header id="masthead" class="group">
  //content
</header>

上記のリンクにもサブIE8ルールがあります。

編集お詫びします。シナリオを正しく読まずに、質問のタイトルに答えました。この場合、フロートは使用しません。代わりに、私はそのように使用するdisplay: inline-blockのが好きです：

#main_features {
  font-size: 0; /* this resets the default padding created by the inline-block rule below */
  margin: -2%; /* offsets the positive margin below */
}

.feature {
  display: inline-block;
  vertical-align: top;
  width: 46%;
  margin: 2%; /* width + (2x margin) = 50%*/
  font-size: 12px; /* because it is reset to 0 by parent */
}

一部のブラウザは要素にパディングを追加するため、親要素のフォントはゼロに設定されますinline-block。親要素には、子要素のマージンを相殺するための負のマージンもあります。これにより、コンテンツをページの残りの部分に合わせることができます。

ここでこれの基本的なデモを作成しました。

于 2013-02-14T13:01:28.193 に答える
0

クラス名と適切なセレクター（）を使用してclearfixを適用している場合は.clearfix、セレクターでも同じことができます。#main_features

したがって、通常のclearfixスタイル宣言が次のようになっている場合：

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

...次に、次のようにセレクターに追加するだけで、clearfixクラスを適用する必要がなくなります。

.clearfix:after, #main_features:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;  }
*:first-child+html .clearfix, *:first-child+html #main_features { zoom: 1; } /* IE7 */

...マークアップはそのままにしておきます。

于 2013-02-14T12:10:28.750 に答える
0

それは静かな古い質問ですが、私は同じような質問をしているときにそれを偶然見つけました。とにかく、n番目の子の疑似セレクターを使用して、コンテナー内の3番目の子ごとにフロートをクリアすることで解決しました。

.main_features .feature:nth-child(3n) {
  clear: left;
}
于 2015-02-24T07:29:12.197 に答える