CSS | float

floatを使用する場合

しゅしよう

画像の周囲にテキスト

を囲む.

ページレイアウトの場合、

は、過去にレイアウトに使用されていた.

最近のレイアウトのキャプチャ
flex > float

浮動小数点値のタイプ

none : 要素はオフセットされません.(default)

left : エレメント自体をコンテナの左側に配置します.

right : エレメント自体を含むコンテナの右側に配置します.

Inherit : 要素自体を含む親のfloatプロパティを取得します.

float左(または右) くっついたので、 {position:absolute}と一緒に使用できません.

float問題と解決
質問1:親が認知できない→親を離れる
解決する.
1.最後にラベルを付けてclearプロパティを適用する

clearプロパティ
float要素の横に埋め込まれた要素に適用されるプロパティ

負担:より多くのHTMLコードを入力する必要があります.

特長
clear: left; もしそうであれば、左側のオーバーラップ要素はオーバーラップしません.

2.外部divへのオーバーフロー:hidden;ズーム

を超えるコンテンツを非表示にすることができます.

3.外部divにフローティング
→サブアイテムの浮動高さを認識し、それに応じてその高さを占める
→問題:floatとなり、block元素の性質が消失する.
→問題の解決:width:100%;追加
質問2:画像が大きすぎて親を超えた場合
float propertyとして宣言されたサブエレメントを含む親エレメントの高さが正常な値にならないという問題を解決したい場合.
解決2(clearfixカーネル)

         .clearfix {
           overflow: auto;
           zoom: 1;      # IE6를 지원하고 싶다면 추가
         }

→親の中には自分のイメージがある