ホームページ > 記事 > ウェブフロントエンド > フローティング問題を解決する CSS 実装
フローティング問題を解決する CSS 実装
- 零到壹度オリジナル
- 2018-03-27 16:36:471712ブラウズ
まず第一に、なぜフロートをクリアする必要があるのかという質問について考えなければなりません。小さなデモを行っていたときに、子要素をフロートさせると親要素の背景色が消えてしまうという問題が発生しました。当時の私の初心者レベルでは、明確に背景色を設定したのに、なぜ親要素の背景色が欠落しているのかわかりませんでした。色の形式が間違っていたのではないかと思います。それともブラウザに互換性がなく、CSSハックなのでしょうか？ ? ? ? ? ? ? ?すべての推測は背景色を指しており、すべて背景色のせいです。
なぜフロートをクリアする必要があるのですか?
ピットで苦しみ続けた結果、背景色のせいではありませんでした。ただし、その子要素。子要素がフローティングになると、親要素の高さが 0 になります。これは、親要素が高さを設定せず、元の高さが子要素によってサポートされるためです。子要素がフローティングの場合、子要素はドキュメントフローから外れ、親要素はまだドキュメントフロー内にあります。このとき、親要素の内容は何もないため、親要素の高さは元のものになります。高さが設定されていません (0 に設定されています)。親要素の内容に非浮動要素がある場合、親要素の高さは、これらの要素の最も高い高さによってサポートされます。写真に示すように:
HTMLコード
<p> <img src="./2.png" alt=""> <img src="./1.png" alt=""> <img src="./1.png" alt=""> </p>フロートがない場合の状況:
HTMLコード
<p> //此时大图片左浮动，及下图的效果 <img src="./2.png" alt="" style = "float: left;"> <img src="./1.png" alt=""> <img src="./1.png" alt=""> </p>フローティングしている場合の状況: (大きい画像フロート: 左、小さい画像は変更されません)
上記の分析から結論付けることができます。子要素がフローティングであると、親要素の「高さの崩壊」が発生します。
フロートをクリアするにはどうすればよいですか?
フロートをクリアする方法は現在、8 つほどあります。しかし、プロジェクトで実際に使用する場合、最も一般的な方法は次の 2 つです: 1. 疑似クラス: after; を追加します。 2. BFC をトリガーし、このクラスに疑似クラス: after を設定します。
えー
見てください！これがフロートをクリアする最初の方法です。浮いているアイテムを取り除く一般的な方法でもあります。
2. BFCをトリガーする
1) BFCとは何ですか?
BFC (Block Formatting Context) は、Web ページのボックス モデル レイアウト用の CSS レンダリング モードです。その位置付けシステムは通常のドキュメント フローに属します。 W3C より抜粋:フローティング、絶対配置要素、インラインブロック、テーブルセル、テーブルキャプション、およびオーバーフロー値が表示されない要素（この値がビューポートに渡された場合を除く）は作成されます A新しいブロックレベルの書式設定コンテキスト。
上記の引用は、BFC がどのように形成されるかをほぼ要約しています。しかし、よりよく理解するために別の方法で再定義してみましょう。 BFC は HTML ボックスであり、次の条件の少なくとも 1 つを満たします:
float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者
inline-flex中的其中一个overflow的值不为visible
2) 如何用BFC清除浮动
粗暴的总结就是让浮动块包含在同一个BFC中加同时（也可以理解为包含块加属性overflow:hidden）。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container { overflow: hidden; } .a { float: left; } </style></head><body> <p> <img src="./2.png" alt=""> <img src="./1.png" alt=""> <img src="./1.png" alt=""> </p> </body> </html>
有利也有弊，下面简单指出BFC的缺点：
- display:table可能会产生一些问题
- overflow:scroll可能会显示不必要的滚动条
- float:left将会把元素置于容器的左边，其他元素环绕着它
- overflow:hidden将会剪切掉溢出的元素
以上がフローティング問題を解決する CSS 実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。