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

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

空のラベル メソッド

古いものから新しいものへの順序で、空のラベルに 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は一筆書きです。ああ...