フローティングfloatとクリアフローティングclearfix
浮動は、HTMLレイアウトでよく使われるCSS属性で、多くのウェブデザインが浮動に使われていますが、浮動はウェブレイアウトの必需品ではありません.フローティングは破壊的であるため、フローティングを採用すると逆効果になることが多い.張大神のCSS三無準則には「浮動なし」という準則があり、ホームページ全体のレイアウトを提唱するには浮動要素を使わないほうがいい.誰もが張大神ではありません.ホームページのレイアウトには自分の考えと方法があります.浮動を使う必要があるかどうかは自分次第です.あまり浮動のないレイアウトを追求する必要はありません.
floatの歴史
道家には雲がある:人法地、地法天、天法道、道法自然.すべての物事はその本質を追って、その本質を掌握してこそ、それをよりよく理解することができる.浮動については、その歴史を理解してこそ、よりよく運用することができます.比較的古いHTMLドキュメントでは、画像と文字が互いに分離されており、ドキュメントの表示が極めて見苦しく、この問題を解決するために、float属性が文字の表示を助けることを提案し、すべてのfloatの最初の役割は文字の囲みである.
floatの特性
floatの本来の役割を理解して文字の囲みを実現した後、その特性を理解する必要があります:包帯性と破壊性
ラップ性は、その名の通り、もともと緩やかで規則のない物体を外層容器に添加して遮断し、ラップ中のいかなる性質が変動してもラップ外のものに影響を与えない.専門用語:block formatting context-ブロックレベルフォーマットコンテキスト、BFCと略称する.
破壊性は、高容器のない中性子容器にfloatを使用すると親容器の高さが陥没し、子容器の位置がfloatの属性値によって変動し、floatが破壊性を持っているため、多くの人がfloatを悪魔と呼んでいる.
floatの破壊性による親容器の高さ陥没はバグではないか
多くの人はfloatの破壊性が親容器の高さを陥没させるのはバグだと思っているが、そうではなく、floatが親容器の高さを陥没させるのが標準である.どのように規範が新しい問題を導入するのか疑問に思う人もいるかもしれませんが、これはfloatの本来の役割にさかのぼる必要があります.現実的な文字の囲み効果のためだけです.当初の設計者は,文字の折り返し効果をどのように実現するかを解決する際に,この特性を破壊することを採用した.親コンテナの高さがない場合、高さはサブエレメントによって支えられますが、サブコンテナの周囲にテキストを囲むには、親コンテナの高さを破壊してから、テキストを囲む必要があります.
floatによる影響を除去する方法
多くの人が浮動をクリアするという説を知っていますが、実はこの説は正確ではありません.浮動をクリアすることによる影響と呼ぶべきです.浮動はずっと存在しているからです.
フローティングをクリアするには、次の2つの方法があります.
方法1:HTML実装方法、足の裏にclear:bothを挿入し、陥没した親コンテナの底にblock水平要素を挿入する
方法2:親要素BFC(IE 8+)またはhaslayout(IE 6/IE 7)を使用して、CSSを使用して、集約された親容器の底部にclear:bothのafter擬似要素を生成します.
この2つの方法には欠点があり、1つ目はHTMLにdiv要素を挿入すると余計な感じがします.第2の方法は、after擬似要素であり、IE 6/IE 7についてはよく知られていない.
IE 6/IE 7対応の書き方
擬似要素にはさらに良い方法があります(互換性ok):
どんな場合に使う必要がありますか.clearfix
多くの人が乱用します.clearfix、不要な親コンテナに追加します.clearfix、このやり方は実は余計です.では、どのような場合に使用する必要があるか.clearfixは、フローティングサブ要素を含む親要素にclearfixが適用されます.濫用clearfixは無駄ではなく、IE 6/IE 7に特別なことをさせる可能性があるので使用しています.clearfixは、フローティングサブ要素を含む親要素に作用することを理解してください.
floatの歴史
道家には雲がある:人法地、地法天、天法道、道法自然.すべての物事はその本質を追って、その本質を掌握してこそ、それをよりよく理解することができる.浮動については、その歴史を理解してこそ、よりよく運用することができます.比較的古いHTMLドキュメントでは、画像と文字が互いに分離されており、ドキュメントの表示が極めて見苦しく、この問題を解決するために、float属性が文字の表示を助けることを提案し、すべてのfloatの最初の役割は文字の囲みである.
： float：left ：floatの特性
floatの本来の役割を理解して文字の囲みを実現した後、その特性を理解する必要があります:包帯性と破壊性
ラップ性は、その名の通り、もともと緩やかで規則のない物体を外層容器に添加して遮断し、ラップ中のいかなる性質が変動してもラップ外のものに影響を与えない.専門用語:block formatting context-ブロックレベルフォーマットコンテキスト、BFCと略称する.
破壊性は、高容器のない中性子容器にfloatを使用すると親容器の高さが陥没し、子容器の位置がfloatの属性値によって変動し、floatが破壊性を持っているため、多くの人がfloatを悪魔と呼んでいる.
floatの破壊性による親容器の高さ陥没はバグではないか
多くの人はfloatの破壊性が親容器の高さを陥没させるのはバグだと思っているが、そうではなく、floatが親容器の高さを陥没させるのが標準である.どのように規範が新しい問題を導入するのか疑問に思う人もいるかもしれませんが、これはfloatの本来の役割にさかのぼる必要があります.現実的な文字の囲み効果のためだけです.当初の設計者は,文字の折り返し効果をどのように実現するかを解決する際に,この特性を破壊することを採用した.親コンテナの高さがない場合、高さはサブエレメントによって支えられますが、サブコンテナの周囲にテキストを囲むには、親コンテナの高さを破壊してから、テキストを囲む必要があります.
floatによる影響を除去する方法
多くの人が浮動をクリアするという説を知っていますが、実はこの説は正確ではありません.浮動をクリアすることによる影響と呼ぶべきです.浮動はずっと存在しているからです.
フローティングをクリアするには、次の2つの方法があります.
方法1:HTML実装方法、足の裏にclear:bothを挿入し、陥没した親コンテナの底にblock水平要素を挿入する
<div style="content:'';clear: both;"></div>方法2:親要素BFC(IE 8+)またはhaslayout(IE 6/IE 7)を使用して、CSSを使用して、集約された親容器の底部にclear:bothのafter擬似要素を生成します.
.clearfix:after{content: '';display: block;height: 0;overflow: hidden;clear: both;}この2つの方法には欠点があり、1つ目はHTMLにdiv要素を挿入すると余計な感じがします.第2の方法は、after擬似要素であり、IE 6/IE 7についてはよく知られていない.
IE 6/IE 7対応の書き方
.clearfix:after{content: '';display: block;height: 0;overflow: hidden;clear: both;}
.clearfix{*zoom:1;}擬似要素にはさらに良い方法があります(互換性ok):
.clearfix:after{content: '';display: table;clear: both;}
.clearfix{*zoom:1;}どんな場合に使う必要がありますか.clearfix
多くの人が乱用します.clearfix、不要な親コンテナに追加します.clearfix、このやり方は実は余計です.では、どのような場合に使用する必要があるか.clearfixは、フローティングサブ要素を含む親要素にclearfixが適用されます.濫用clearfixは無駄ではなく、IE 6/IE 7に特別なことをさせる可能性があるので使用しています.clearfixは、フローティングサブ要素を含む親要素に作用することを理解してください.