賢いclearfixでCSSフローティング問題を解決

CSS フローティングの問題を解決するためにクリアを使用する方法は、多くのフロントエンド開発者が懸念している問題です。実際、私たちの最終的な目標は、フローティングをフロントエンドとしてより大きな影響力を持つようにすることです。スタッフ、私たちはそれを徹底的に研究し、議論する必要があります...

ユニバーサルフロートクロージャーについて、多くの友人が次の一般的な解決策を使用していることを知りました:

clear{clear:both;height:0;overflow:hidden;}

アピールメソッドは、フロートをクリアする必要がある場所です。 div.clear または br.clear を追加します。これにより、基本的なクリアフローティングの問題が解決できることがわかっています。しかし、この方法の最大の欠点は、div を追加するだけではありますが、html 構造を変更してしまうことです。

最適なフローティング クロージャ ソリューション (これが推奨されます):

clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

clearfix{* +height:1%;}

使い方はとても簡単で、フローティング要素の親要素に class="clearfix" を追加します。この方法にも欠点があることがわかりますが、それは確かに小さな問題です。 CSSの書き方を変えるだけでOKです:

clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

clearfix{*+height: 1%;}

上記の書き方はhtml構造の変更を回避し、cssで直接解決します。
とてもクールなフローティングクローズメソッド:

clearfix{overflow:auto;_height:1%}

このメソッドは私が海外の記事を読んで得た解決策で、毎回うまくいきました。非常にシンプルで非常に強力です。それが好きな学生は、この方法を試すこともできます。

このメソッドは Duanyou radom によって提供されており、テストに合格しました:

clearfix{overflow:hidden;_zoom:1;}