コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > ユニバーサルクリアフローティングスタイル

ユニバーサルクリアフローティングスタイル

巴扎黑
リリース： 2017-04-05 11:02:14
オリジナル
2022 人が閲覧しました

これはフロートを除去する非常に一般的な方法であり、多くの大規模プロジェクトで完全に採用されています。

このメソッドは、positioniseverything から来ており、after 疑似クラス、after および IEhack を通じて実装されています。これは、現在の主流のブラウザーと完全に互換性があります。

りー

これは admin10000.com がフロートをクリーンアップするために使用するコードです

​​
.clearfix:after  
{  
  content: ".";  
  clear: both;  
  height: 0;  
  visibility: hidden;  
  display: block;  
} /* 这是对Firefox进行的处理，因为Firefox支持生成元素，而IE所有版本都不支持生成元素 */ .clearfix{display: inline-block;} /* 这是对 Mac 上的IE浏览器进行的处理 */ * html .clearfix{ height: 1%; } /* 这是对 Win上 的 IE6 浏览器进行的处理 */ * + html .clearfix{ height: 1%; } /* 这是对 Win 上的 IE7 浏览器进行的处理 */ .clearfix{display: block;} /* 这是对display: inline-block;进行的修改，重置为区块元素*/
ログイン後にコピー

これはクリアフローティングスタイルの最適化されたバージョンであり、強くお勧めします。

関連ドキュメント: CSS で float をクリアする一般的な方法のまとめ

以上がユニバーサルクリアフローティングスタイルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
CSS，清除浮动
ソース：php.cn
前の記事：CSS ハック テクノロジーを使用してブラウザの互換性の問題を解決する 次の記事：CSS初期化コード
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート