.clearfix-ほとんどのレイアウト設計者はこれを好んでいますが、その使用は、 フロートブロックを操作するためのシンプルさと他の方法の欠如に動機付けられています。 別の方法であなたの注意を喚起したい-それほど効果的でも複雑でもない。 習慣ではありませんが、多くの人が.clearfixが非難する -とすべてが機能すると言いますが、その使用は常に正当化されておらず、時には不可能ですが、何らかの方法でブロックのペアを確立する必要があります。または、新しい要素を環境に追加します。
まず、 float：rightおよびleftプロパティが追加されたときに要素と親に何が起こるかを考えてください。 小さな例を考えてみましょう：
<!-- 1 - --> <style> ul { padding: 20px; margin: 20px; } li { float: left; list-style: none; margin-left: 5px; border: 1px solid red; } </style> <ul> <li></li> <li></li> <li></li> </ul> <p>- </p>
この例では、LIにはfloat：leftプロパティがあります。 そして、予想されるように、彼らは次々と並び、「いくつかのテキスト」が次に添付されます。 まあ、これは古典的なフロート動作です。 しかし、私たちはまだULを持っているので、親を見てみましょう。 フロートを設定しませんでしたが、デフォルトではブロック要素ですが、なぜ転送しないのですか？
しかし、次のことが起こりました。ページにフロート要素を表示するために、ブラウザは「一般的なストリームからそれらを引き出し」、適切な場所に配置します。その結果、テキストやその他の要素が流れます。 選択したブロックの右側からクリアプロパティを無効にするためにクリアプロパティが導入されたのは、フローを無効にすることでした。
親ブロックにclearが設定されている場合はどうなりますか：両方; ？ 既に述べたように、親にフロートを設定しなかったため、何もラップしなかったため、完全になくなった場合、その内容は「ストリームから破棄された」ためです。
.clearfixがこれをどのように処理するかを見てみましょう：
<!-- 2 - .clearfix --> <style> .clearfix:after { content: ""; display: table; clear: both; } ul { padding: 20px; margin: 20px; } li { float: left; list-style: none; margin-left: 5px; border: 1px solid red; } </style> <ul class="clearfix"> <li></li> <li></li> <li></li> </ul> <p>- </p>
彼はタスク.clearfixに対処しました。 彼はどうやってそれをしますか？ 選択された要素の後に擬似要素を追加し、その下にあるすべてのフロート要素を囲みます。 以下は、ストリーム内の親要素が空で、ほとんど存在しないためです。したがって、要素を物理的に最初に配置した後 、ブラウザはすべての要素がフロートで終了するタイミングを計算する必要があります。
そして、これは.clearfixを使用しないオプションです ：
<!-- 3 - .clearfix --> <style> ul { padding: 20px; margin: 20px; display: inline-block; } li { float: left; list-style: none; margin-left: 5px; border: 1px solid red; } </style> <ul class="clearfix"> <li></li> <li></li> <li></li> </ul> <p>- </p>
表示プロパティ：インラインブロック; 親要素の場合。 結果は同じですが、唯一の違いは、 .clearfixが親要素ブロックを残すこと、または以前に定義されたとおりであることです。 使い方-自分で決めてください。 また、古典的なソリューションの場合、これらの方法はほぼ同等です。
ただし、親要素自体（およびその内部の要素）が浮いていて、他のブロックをそれに対して相対的に配置する必要がある場合、 .clearfixを使用できない場合があります。 親要素はサイズ0を占有します（コンテンツとそれ自体は「ストリームから破棄されます」）。 そして、彼の環境で他の要素を配置するには、固定の高さを登録する必要があります（不安定になる場合があります） 。 （これは、コンテンツの不整合によって常に予測できるとは限りません）。 場合によっては、 サイト上のそのような「 サイト 」に追加コンテンツを追加する場合、レイアウトの概念全体を確認し、「 サイト 」全体を再配置する必要があります。
表示プロパティを使用すると、 .clearfixを適用できない場合に、開発ツール（firebugまたはブラウザーに組み込まれた他の検査ツール）によるレイアウト診断が容易になります。 実際、この操作が行われない場合、インスペクターは親要素を見つけることができず（インデントがない場合）、ページをレンダリングするときにコンテンツに場所が割り当てられません（これは、検査するときに例1で明確に見られます）。 表示：インラインブロック。 これらの問題を回避するのに役立ちます。
このオプションを見てみましょう。
Clearfix-div.boxの親には、ULに規定されている外部マージンが含まれていませんでした。インラインブロックは、必要に応じてすべてのインデントを所定の場所に配置しました。
そして、インラインブロックの幅がブロックのようになるように、幅を追加します：calc（100％-80px）-外側と内側のインデントが幅から除外されることを忘れないでください。
合計：自由自在-この問題を解決する方法は複数あります。 さて、あなたが選択をするとき、あなたの健康を使ってください！