：afterを使用してフローティング要素をクリアする

106

私はリストを持っており、liはを持っていfloat:left;ます。後のコンテンツは<ul>正しく配置されている必要があります。したがって、私は以下を構築できます：

http://jsfiddle.net/8unU8/

<div class="clear">：afterのような疑似セレクターを使用して、を削除できると思いました。

しかし、例は機能していません：

http://jsfiddle.net/EyNnk/

フローティング要素をクリアするには、常に別のdivを作成する必要がありますか？

html css

— トルベン
ソース

261

このように書きます：

.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

これをチェックしてくださいhttp://jsfiddle.net/EyNnk/1/

— Sandeep
ソース

これがその方法です。しかし、セマンティクスに関する私の回答の要点に注意してください。

— アレックス

2

ほんの少しの情報です：::after二重のコロンを使用することは、疑似要素をターゲットにする推奨される方法です。

— Dennis98 2016年

11

二重コロン（：:) CSS3構文をサポートするすべてのブラウザーは（:)構文のみもサポートしますが、IE 8は単一コロンのみをサポートするため、現時点では、最良のブラウザーサポートのために単一コロンを使用することをお勧めします。::は、疑似コンテンツと疑似セレクターを区別するためにインデントされた新しい形式です。IE 8のサポートが不要な場合は、ダブルコロンを自由に使用してください。 css-tricks.com/almanac/selectors/a/after-and-before

— レトロリフ2016

なぜこれを置くべきなのか： "content： ''; display：block;" ？インラインラッパーが必要な場合はどうしますか？

— Lucke

6

いいえ、次のようなことを行うだけでは十分ではありません。

<ul class="clearfix">
  <li>one</li>
  <li>two></li>
</ul>

そして次のCSS：

ul li {float: left;}


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

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
   display: block;
}

* html .clearfix {
   height: 1%;
}

— カーネルパニック
ソース

5

これも機能します：

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

.clearfix:after {
    clear: both;
}

/* IE 6 & 7 */
.clearfix {
    zoom: 1;
}

要素などclearfixの親要素にクラスを割り当てますul。

こことここのソース。

— マディ
ソース

1

表示：テーブルは余分なスペースを追加できます。私は代わりにdisplay：blockを使用します

— Cogは

0

「dasda」というテキストがタグ内に含まれることはありませんよね？意味的に、有効なHTMLになるためには、それに明確なクラスを追加するだけです。

http://jsfiddle.net/EyNnk/2/

— アレックス
ソース

1

セマンティクスではありません。1）私たちが彼の子供がそれに浮いている場合、たとえば、あなたの答えに従ってULに背景を与えたい場合、常に親要素をクリアします。 Pの前に別のDIVでクラスを作成します。Pのみを指定した場合も機能します

— Sandeep

0

使用する

.wrapper:after {
    content : '\n';
}

Rokoが提供するソリューションとよく似ています。これを使用してコンテンツを挿入/変更することができます：後と：前の擬似。詳細については、http：//www.quirksmode.org/css/content.htmlを確認してください

— サチンクマール
ソース