ここのコミュニティは、古い「clearfix」ハックが減価償却され、overflow:hidden. 残念ながら、この方法を使用しても問題が発生する場合があります。(例:正しく機能した場合、これは次のようになります。)
旧式を使用することの主な問題は、プレゼンテーションを変更することのみを目的として要素を<div class="clear">作成することです。これは、純粋なセマンティック マークアップの理想をプレゼンテーションで混乱させているようです。div
ただし、それ以外は、すべてのブラウザーおよびすべての状況でうまく機能するようです (これは "clearfix" や とは言えませんoverflow:hidden)。
を使用することの他の欠点はありますclear:bothか? そんなに使い勝手が悪いのでしょうか？それとも単なる個人的な好みですか？
clear: bothclear: both同じブロック書式設定コンテキストに他の浮動小数点が存在する場合、要素はそれらの下に強制されるという副作用があります。時々これはあなたが望むものです。そうでない場合もあります。このjsbinは、ランチを食べるケースを示しています。
秘訣は、クリアされた要素がどのフロートと相互作用するかを制御することです。ブロック フォーマット コンテキストを使用してこれを行います。これは、内部ですべてのフロート要素とクリアされた要素が相互作用する絶縁された四角形です。ブロック フォーマット コンテキストの外側のフロートおよびクリアされた要素は、内部のフロートまたはクリアされた要素と相互作用できません。
これは、 を使用する際に留意すべき重要な欠点の 1 つclear: bothです。そんなに使い勝手が悪いのでしょうか？いいえ。フロートとクリアがどのように相互作用するか、および必要なときに相互作用を防ぐ方法を認識しておく必要があります。多くの場合、これらの問題は発生しないため、フロートをクリアする方法の選択は個人的な好みの問題になる可能性があります。しかし、状況によっては、フローティングとクリアリングがどのように機能するかをより深く検討する必要があります。どの消去方法にも副作用があるため、状況に応じて適切な方法を選択する必要があります。「clearfix」のどの方法が最適ですか? に詳細な回答があります。
大丈夫だよ。純粋な CSS メソッドほど良くはありませんが、overflow:hidden / auto がうまく機能しない場合があります (たとえば、絶対配置された要素をコンテナーから「ポップ」したい場合)。
はい、保守コストが追加されます。理論的にはSEOにとって最適ではありませんが、大罪ではありません.
clear:both単に、左または右にフロートが許可されていないことを意味します。別の方法は存在しますが、古いブラウザには安全ではありません。
.element:after { content:""; clear:both; }
私はかなり明確です：標準です、あなたがそれらを完全に理解していない場合、フロートはただトリッキーです（それは私に時間がかかりました）。
空白が存在する理由は、フロートされた要素が実際には「存在しない」ということです。つまり、コンテナがラップアラウンドするための明確な寸法を与えないからです。clear:left clear:rightフロートの後のアイテムにまたはを使用すると、メソッドclear:bothを使用するのと同じように、ハードラインが作成されます。<div class="clear"></div>
個人的には、実証済みのハックを使用して、（うまくいけば）すべての場所でサポートされている場合に備えて疑似要素を追加します。