フローティング CSS_html/css_WEB-ITnose をクリアするいくつかの方法

最初の方法:

フローティング ボックスは通常のドキュメント フローに含まれないため、スペースを占有しません。たとえば、次のコード:

.news {

background-color:gray;

border:1px Solid black;

}

.news img {

float:left;

}

.news p {

float:right;

}

< ;p>一部のテキスト

ただし、フローティング要素はドキュメント フローの外にあるため、画像とテキストを囲む div はスペースを占有しません。周囲の要素が浮動要素を視覚的に囲むようにするにはどうすればよいですか?この要素のどこかにクリアを適用する必要があります。残念ながら、この場合は削除する要素がないため、最後の段落の下に空の要素を追加して削除します。

追加:

.clear {clear:both}

...

これは float をクリーンアップする最初の方法ですが、この方法では意味のないタグが追加されます。

2 番目の方法 は、フローティング テキストと画像をクリーンアップするのではなく、フローティング コンテナー div を選択することです:

.news {

background-color:gray;

border:solid 1px black;

float: left;

}

...

ただし、div と同じレベルの要素は影響を受けます。

3 番目の方法 は、オーバーフロー属性を使用することです。 hidden または auto の値を指定して overflow 属性を適用すると、含まれている浮動要素が自動的にクリーンアップされるという便利な副作用があります:

. hidden;

}

...

4 番目の方法

を使用します。疑似クラスとコンテンツ宣言の後、指定された既存のコンテンツの最後に新しいコンテンツを追加します:

.clear:after {

content:"."; Height:0;

visibility:hidden;

display :block;

clear:both;

}

.. .

この方法は、ほとんどの最新のブラウザでタオバオのホームページで有効です。もこのメソッドを使用して浮動小数点数をクリアしますが、IE6 以前のバージョンでは機能しません。

IE6 では次のハックが必要です:

.clear {

display:inline-block;

}

* html .clear {height:1%;}

.clear {display:block;}

その他: http://my.oschina.net/leipeng/blog/221125

記事の抜粋: フロントエンドへの道

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。