[HTML/CSS]Float
float
MDNドキュメントはfloatを定義します.以下に示します.
CSS属性(属性) floatは、通常のフロー(法線フロー)からエレメント(エレメント)を除去する必要があり、テキストと行内(インライン)エレメントは、その周囲の磁性容器の左右に沿って配置する必要があります.
私の勉強と理解で説明すると、floatという言葉は豊かな意味です.プロパティを付与して、Webページに所望の位置に「フローティング」させると思います.
floatプロパティが提供できる値
左、右のプロパティを適用すると、表示は無視されます.これは、基本プロセスから離れることを意味します.
これは、後の要素にclearがあるかどうかによって異なります.
clear
clear-印刷テクニックのキャンセル
clear属性値
印刷された要素は、ドキュメントの流れから離れているため、レイアウトを破壊します.上記の問題を解決するにはfloatを無効にする必要があります.
ここで、「フローティングを無効にする」とは、フローティングを適用した要素を無効にするのではなく、clearプロパティを適用してフローティングの影響を受けないようにすることを意味します.
親要素に印刷された子要素が含まれている場合:
親(containing要素)は、フローティングアトリビュートを反映することもできます.
親要素には「display:inline-block」プロパティがあります.
さらに、子要素が親要素ボックスより大きい場合は、「overflow:hidden」プロパティを使用して、子要素ボックスの内容を非表示および非表示にできます.特別な場合を除き、この方法は推奨されません.
練習!
<div>のラベルを使用して、3つのボックスを作成しました.[上から下]を押してフロー配置を表示しますが、効果はありません.
「float:right」プロパティを
BOX 1に配置し、Juniorストリームから離れて右にシフトさせた.また、divのdisplayプロパティは消え、テキストサイズと同じボックスのみを占有している可能性があります.だから探してみました.💥💥 印刷された要素は、その要素のタイプにかかわらずblockboxとなり、display:inline-block;公言と同じ!!💥💥
「float:left」プロパティをBOX 1上に配置し、フローから左にシフトさせます.
すべてのボックス
「float:left」プロパティに、すべてのボックスが左にシフトします.上と同じ幅をあげます.
ページの幅が足りない場合は、自動的に垂れ下がる可能性があります.
BOX 1に垂直値を与え、BOX 3は辺に寄る.clear!
の上に見た3つの箱を両親の<div class="pa">の箱に入れた.親ボックスにbackground-color:grayと表示されますが、背景色は表示されません.
「display:inline-block」と「float:left」のプロパティをそれぞれ付与し、背景色を表示します!
また、clearプロパティは、印刷要素の最後の要素(兄弟)に空白のセグメントを作成することで適用することもできます.
<body>
<div class="pa">
<div class="one">BOX1</div>
<div class="two">BOX2</div>
<div class="thr">BOX3</div>
<div class="four"></div>
</div>
</body><div class="four"></div>を追加し、「clear:both」を与えます.
親の背景色が出てきました!
float自体は初めての勉強なので混同しています
週末にもう一度勉強して整理しなければなりません.🔥
https://webclub.tistory.com/m/606
Reference
この問題について([HTML/CSS]Float), 我々は、より多くの情報をここで見つけました https://velog.io/@hyoniii_log/HTMLCSSFloatテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol