クリアフローティング solution_html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 08:49:45
オリジナル
1248 人が閲覧しました

たまたま記事を見つけて、私と私のプロジェクトがフロートの解消に遅れていることがわかったので、整理したいと思います。

空のラベル メソッド

古いものから新しいものへの順序で、空のラベルに CSS を追加することで、最も古いメソッドが空のラベル メソッドになります。

.clear{clear:both;line-height:0;}
ログイン後にコピー

でフロートをクリアします。ページの複雑なレイアウトを頻繁にフローティングする必要がある場合、このアプローチでは多くの空のタグが生成され、ページ上の無駄なタグの数が増加し、ページの最適化には役立ちません。

after Dafa

その後、after 疑似要素を使用する方法がありました:

.clearfix:after {     visibility: hidden;     display: block;     font-size: 0;     content: " ";     clear: both;     height: 0; } .clearfix{*zoom:1;}
ログイン後にコピー

最適化

上記の方法はまだ面倒です。誰かがもっと簡単な方法を紹介しています。

.clearfix:after {     content:"200B";     display:block;     height:0;     clear:both; } .clearfix {*zoom:1;}/*IE/7/6*/
ログイン後にコピー

ここでの 200B はゼロです。このような幅スペース。visibility:hidden は必要ありません。

非常に効率的な方法

非常に効率的な方法もあります。

.clearfix:before,.clearfix:after{     content:"";     display:table; } .clearfix:after{clear:both;} .clearfix{     *zoom:1;/*IE/7/6*/ }
ログイン後にコピー

後述する 2 つの方法比較的シンプルで、プロジェクト エンジニアリングに使用できます。

感想

先生が言っていたのを思い出しました、CSSは一筆書きです。ああ...

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート