float

cssの様々なソート方法の1つです.
floatはその名の通りの意味です.
上から下へ、左から右へ、タグは順番に並べられ、そのうちの1つのタグが突然空に現れた.その後ろのテグ人はその位置を埋めたいと思っています.

#HTML 코드#

<div id="floatLeft">float-left</div>
<div class="normal">normalnormalnormalnormalnormal</div>
<div id="floatRight">float-right</div>
<div class="normal">normalnormalnormalnormalnormal</div>
<div id="floatLeft">float-left</div>
<div class="clear">clearclearclearclearclear</div>

#css 코드#

#floatLeft {
  float: left;
  background: yellow;
}
.normal {
  background: skyblue;
}
#floatRight {
  float: right;
  background: yellowgreen;
}
.clear {
  clear: both;
  background: skyblue;
}

本来ラーメンノーマルラベルはblockラベルなので、行全体を占拠しますが、floatで上へ.このプロパティを使用して、float文字ではなく段落の左側に画像を配置できます.
normalラベルのように上昇しないようにしたい場合は、どうすればいいですか?clear:左またはclear:右;やればいい.浮動小数点を取り除く役割を果たした.左右を問わずclear:どちらでもいいです.上のclearラベルを見ると、もう重複していないことがわかります.
floatの問題は、親タグがfloat属性のサブタグを認識できないことです.そのため、高さがゼロの問題が発生します.

#HTML 코드#

<div id="parent">
  <div class="float">float</div>
</div>
<div id="parent-overflow">
  <div class="float">float</div>
</div>

#css 코드#

#parent {
  background: yellow;
}

.float {
  float: left;
}

#parent-overflow {
  background: skyblue;
  overflow: auto;
  clear: both;
}

上記の例に示すように、#parentの背景は黄色でなければなりませんが、そのサブアイテムはです.floatタグが認識できないため、高さは0なので背景色は表示されません.floatプロパティのサブタグを識別するには、親タグがサブタグの高さを正常に識別するには、flow:autoまたはflow:hiddenを与える必要があります.
display:float:leftはinline-blockの間隔の問題を解決するために使用されます.さっきのtransformの例では、display:inline-blockではなくfloat:leftを使用しました.