浮動コンセプト
ブロック浮動は、外枠の縁は、フローティングボックスまでのフレームまたは他を含むヒットするまで左または右に移動させてもよいです。
文書の一般的な流れは、浮動ボックス内にはないので、浮動ボックスのようなブロックボックスの振る舞いにおける文書の通常の流れが存在しないようにします。
第二に、浮遊効果
1.フロートは親要素の高さの崩壊につながります
親要素が子要素を持っている、と親要素の高さは、親要素に浮かぶ子要素に設定されていない場合、結果は親要素の高さになり、親要素の高さの問題の崩壊につながった、0です。
ドキュメントフローのうち、フローティング、この質問は、高さの崩壊の問題を解決する方法を、ページ全体のレイアウトに大きな影響を与えるだろう、私たちは、フロートをクリアする必要があります。
第三に、浮動クリア
1.明確な空のタグ属性
要素を浮動ヌルラベルを追加した後<div class="clear"></div>、およびCSSで提供され.clear{clear:both;}、フロートをクリーンアップします。
- 原則：明確性を向上するために、空白のラベル、使用のCSSを追加します。両方の透明フロートを、親要素が自動的に高さを得ることができるので、
- 長所：シンプル、より少ないコード、すべてのブラウザとの互換性
- 短所：構造を混乱させ、あなたのタグを高めます
- 推奨：推奨されません、この方法は、古くなっ
2：擬似要素の後
容器にフロート追加clearfixクラスのを、そのクラスが追加されている:afterフローティング達成するために、クリーニング要素の後に追加された要素のブロック（ブロック要素）不可視擬似要素。
- 原則：「/ 20」またはポイント目に見えないスペースを含む内部要素の後にダミー要素を追加し、明確な財産透明フロートを設定することにより、CSS。「」
- 利点：より良いブラウザのサポート
- 欠点：clearfixズーム追加するには、このクラスの必要性：1（トリガhaslayout）、IE6とIE7のブラウザをサポートします
- 推奨：推奨、公共のクラスを設定し、CSSコードを縮小