简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

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

WBOY
リリース： 2016-06-24 11:43:06
オリジナル
1325 人が閲覧しました

最初の方法:

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

.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

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

関連ラベル：
CSS 清除浮动的几种方式
ソース：php.cn
前の記事：携帯電話は2層に分かれており、高さを設定する方法。 _html/css_WEB-ITnose 次の記事：疑似クラス(ここの前後)_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
リスト内の唯一の「アクティブ」項目を更新するにはどうすればよいですか? 4 つの要素があるとします。クラス名をアクティブにできるのはそのうちの 1 つだけです。アクティブな要素は 1 秒間に数回更新されます (これはダミーの例です)。簡単なアプローチは...
から 2024-04-02 20:32:27
0
1
389
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！