floatプロパティの注意点/22号/03-6(2)
4982 ワード
floatプロパティを使用して要素を位置決めする場合
floatはフローティングされ、対応する位置に貼り付けられます.(ふわふわした感じ…)
1.基本
2.赤いボックスにfloat:leftが設定されています.(ふわりとした感じで、下に青い箱がありました(青い箱があることを示すために+10 pxしました)
ふわふわした感じ?わかりました.
したがって、次のようなエラーが発生すると理解される.
(浮きで親が認識できない)
サブエレメントの位置はfloat:leftプロパティによって決定され、
divタグ(親)はサブタグの高さを認識できないため、サブタグを囲むことができません.
仮想プロパティを使用すると、エラーを解決できます.(商業地区)
<body>
<div class="wrap">
<section class="left"></section>
<section class="right"></section>
</div>
</body>
.wrap {
width: 800px; //부모 태그의 너비만 지정해주고, 높이는 지정해 주지 않으면 자식태그들의 높이만큼 차지 한다.
margin: 100px auto;
border: 5px solid black;
}
/*이부분 추가해 주면 된다. 부모태그::after에 3가지 속성
.wrap::after {
content:""; //내용은 빈 내용을 표시
display: block;
clear: both;
} */
.wrap .left {
width: 400px;
height: 400px;
background-color: pink;
float: left;
}
.wrap .right {
width: 400px;
height: 400px;
background-color: red;
float: left;
}
-
親divタグではサブタグの高さを認識できません.(borderに囲まれていません)
-
親divタグはサブタグの高さを認識している.(borderを正しく設定)
Reference
この問題について(floatプロパティの注意点/22号/03-6(2)), 我々は、より多くの情報をここで見つけました https://velog.io/@tpgus758/float-속성-버그テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol