コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS フローティング クリーニング。clear:both タグ_Experience 交換は使用しないでください。

CSS フローティング クリーニング。clear:both タグ_Experience 交換は使用しないでください。

WBOY
リリース： 2016-05-16 12:05:25
オリジナル
1441 人が閲覧しました

例:


一部のコンテンツ


この時点でこのコードをプレビューすると、最も外側の親要素である float コンテナが表示されていないことがわかります。これは、子要素がフローティングされてドキュメント フローから切り離され、親要素の高さがゼロになるためです。
コードを次のように変更すると、

一部のコンテンツ

フローティング コード。これは CSS コーディングの良い実践ですが、このアプローチでは無駄な要素が追加されます。より良い方法は、HTML コードを次のように変更することです:

一部のコンテンツ


「フローティング クリーニング」を制御する CSS クラスを定義します:
コードをコピー コードは次のとおりです。

.clearfix:after {}{
コンテンツ: ".";
クリア: 両方;
高さ: 0;
可視性: hidden;
display: block;
} /* Firefox は要素の生成をサポートしていますが、IE のすべてのバージョンは要素の生成をサポートしていないため、これは Firefox のプロセスです */
.clearfix {}{ display: inline-block;
} /* Mac 上の IE ブラウザの処理 */
/**//* IE-mac からは非表示 \*/
* html .clearfix { }{height: 1%;} /* win上のIEブラウザの処理 */
.clearfix {}{display: block;} ;ブロック要素の変更をリセット*/
/**/ /* End Hide from IE-mac */

この時点で、上記のコードをプレビューします (このメモを削除)。子要素がフローティングであっても、親要素はフロートであることがわかります。コンテナは引き続きそれを囲み、高さの調整を実行します。
関連ラベル：
CSS，浮动清理，clear:both
ソース：php.cn
前の記事：CSSテキストインターセプト機能の実装コード 次の記事：テキストボックスCSSで入力方法を閉じる_体験交流
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2060
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2214
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1869
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1753
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1779
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート