ホームページ >ウェブフロントエンド >htmlチュートリアル >BFC のクリア フローティング チャプター&clear_html/css_WEB-ITnose
BFC のクリア フローティング チャプター&clear_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:25:161245ブラウズ
私たちの日常のコード生活では、次の図に示すように、ナビゲーション レイアウトなどのレイアウトに多かれ少なかれ float を使用します。親要素 また、float の問題も解決します。たとえば、
<!DOCTYPE html> <head> <title>Float</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *{ margin:0; padding:0; } ul { border:1px solid pink; } li { width:100px; height:100px; margin-left:10px; background:green; float:left; list-style-type:none; } .div1 { width:100px; height:100px; background:black; } </style> </head> <body> <ul> <li></li> <li></li> </ul> <div class="div1"></div> </body></html>
上の図の子要素 (緑色) が親要素 (ピンクの線) に囲まれていません。これは崩壊の問題です。上の写真の黒いdivは2つの緑のdivの下にあるはずですが、今はこのようになりました。これはfloatをクリアしていないために発生する問題です。
ねえ、この浮いているものはどうしてそんなにひどいのですか？ ！ ！
実際のところ、私は他の人を責めているわけではありません。float の本来の設計意図はレイアウトで使用されることではなく、テキストを囲むことでした。
ツイストメロンは甘くありませんが、喉の渇きを潤してくれます。
その特性に応じて適切な薬を処方してください、ははは。
フローティング ボックスはドキュメント内の通常のフローに属しません。要素がフローティングされている場合、ブロック レベルのボックスのレイアウトには影響しませんが、インライン ボックス (通常はテキスト) の配置にのみ影響します。フローティング ボックスが存在しない場合と同じです。フローティング ボックスの高さが収容ボックスを超えると、収容ボックスは自動的に伸びてフローティング要素を閉じなくなります (「高さの崩壊」現象)。 。名前が示すように、浮雲のように普通の流れに浮かんでいますが、左右にしか浮くことができません。 この浮遊の特性により、通常フロー内の要素が浮遊した後、収容ボックス内には他の通常フロー要素が存在しないため、高さは 0 になります (高さ崩壊)。
さて、要点は理解できたので、適切な薬の処方を開始できます、ははは。
従来の解決策は、クリアからクリアのフロートを使用し、フロートによって引き起こされる崩壊の問題を解決することです。
<!DOCTYPE html> <head> <title>Float</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *{ margin:0; padding:0; } ul { border:1px solid pink; } li { width:100px; height:100px; margin-left:10px; background:green; float:left; list-style-type:none; } .div1 { width:100px; height:100px; background:black; } </style> </head> <body> <ul> <li></li> <li></li> <!--在尾部加入一个带有clear的块级元素--> <div style="clear:both;"></div> </ul> <div class="div1"></div> </body></html>
コードを実行すると、レンダリングが以下に表示されます。
目的は達成されましたが、効果を達成するためにページにコンテンツが追加され、構造が破壊され、セマンティクスがなくなりました。
そこで、このような問題を解決するために疑似要素を導入します。追伸：改造コードではニコラス・ギャラガー師匠のコードを導入しました。
れーれー
ああ、本当だよ。
しかし、IE6 と 7 以降はサポートされません。
はい、最適化する方法を考えてみましょう。
IE6 と 7 には hasLayout があるので、この hasLayout は何ですか? hasLayout 属性値が false の場合、要素のサイズと位置は、true の場合は最新のレイアウトの祖先によって制御されます。 BFCと同様の効果。したがって、これを使用して、IE6 および 7 の :after に対する軽蔑を解決できます。 。
ズームを使用して IE6 および 7 をトリガーするのは比較的一般的な方法であるため、比較的信頼性の高いソリューションを得るためにズームとその後を組み合わせます。
コードは次のとおりです:
<!DOCTYPE html> <head> <title>Float</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *{ margin:0; padding:0; } ul { border:1px solid pink; } /*用after伪元素，向ul追加一个清除浮动元素*/ ul:after { content:''; display:table; clear:both; } li { width:100px; height:100px; margin-left:10px; background:green; float:left; list-style-type:none; } .div1 { width:100px; height:100px; background:black; } </style> </head> <body> <ul> <li></li> <li></li> </ul> <div class="div1"></div> </body></html> 上記のデモ コードを次のように変更します:
/*hack手段针对IE6、7*/.fix { *zoom:1;}/*大众浏览器*/.fix:after { content:""; display:table; clear:both;}