float学習ノート

734 ワード

float特性
  • 任意の要素はfloat属性を使用することができ、行内要素はfloatを使用すると行内ブロックレベル要素
  • になる.
  • 通常ストリームのブロックレベル要素「見えない」フローティング後の要素ですが、このブロックレベル要素のサブ要素が行内要素である場合、これらの行内要素はこのフローティング要素を「見える」ことになります.例えば、通常は文字の囲みを実現するためにこの特性(文字は匿名の行内要素)
  • を利用しています.
  • フローティングボックスは、外縁がボックス(親要素)または別のフローティングボックスにぶつかるまで左または右に移動できます.このプロパティは、フローティング要素が行内の要素のスタイルのように水平に配列できることを意味しますが、高さ設定が問題になると、複数のフローティング要素の水平配列が「引っかかる」場合があります.
    フローティングのクリア
    clearプロパティの使用
    clearプロパティの役割は、ボックスのtop borderエッジがソースドキュメントの前の要素で形成されたすべての左(または右)フローティングボックスのbottomの外側の下にあることです.
    したがって、一般的にはフローティング要素をクリアする必要がある後にclearプロパティを追加し、擬似要素を使用してフローティングをクリアする方法が一般的です.
    .clearfix::after {
      content:'';
      display : block;
      clear : both;
    }
    

    BFC利用
    続きを待つ.