[SS]フローティング属性とトラブルシューティング方法

📌 floatプロパティとは?

:要素の配置を制御する属性
種類(5種類)

左:左側

にラベルを貼る

right:右側

にラベルを貼ります.

none:レイアウトが整列していません

初期値:デフォルト初期化状態

継承:親ラベルのソート属性

を継承してソート

<!--왼쪽부터 가로로 정렬 -->
float: left; 
<!--오른쪽부터 가로로 정렬 -->
float: right

float要求指定領域(幅と高さを指定)

📌 floatプロパティの問題

:floatプロパティをすべてのサブエレメントに適用すると、親エレメントはそのサブエレメントが存在しないと判断し、高さを認識できません.
(👉まず両親に高さをあげましょう.👉それもダメなら次の方法で!)

📌3つのソリューション

[解決策1]
:[オーバーフロー:hidden;]適用

/* 부모 요소 */
.parent { overflow: hidden; }
/* 자식 요소 */
.child1 { float: left; }
.child2 { float: left; }

[解決策2]
:floatが無効(コンテンツなし)になっている空白のサブアイテムを一番後ろに作成し、親(タグ)に適用します.

.clear:after { /* 맨 뒤를 뜻하는 선택자 */
 content: ""; /* 내용 없음 */
 display: block; /* block의 성질을 가지고 있는 자식을 만듦 */
 clear: both; /* float의 left, right 모두 해제 */
 }

<!-- html 적용 -->
<div id="parent" class="clear">
  <div class="child1">box1</div>
  <div class="child2">box2</div> 
  <!-- child2 = 내용이 없는 빈 자식 -->
</div>

に注意
解決策1,2]親が浮動小数点を適用しない他の子には適用されません
(=すべてのサブアイテムにfloatプロパティが必要)
[解決策3]
:直接「clear:that;」属性の適用

.child1 { float: right; }
.child2 { clear: both; } /* float를 적용한 요소(child1) 다음에 오는 요소 */

📌一番簡単な方法は?

最も簡単な方法は、ソリューション1を使用してfloatプロパティをサブエレメントに挿入し、親エレメントのoverflow:hidden;追加するだけ!
よく使われる方法は[解決方法2]で、少し複雑ですが、設定ファイルを1つ作成して利用すればよいので便利と言えます!
この複雑なfloat問題を解決する必要のない柔軟な箱の感謝の時です.

📚 Reference

:公費支援課