floatは英語の意味の通り、要素を浮かせる。
そのため、後続の要素が浮かせた中に割り込むことにより
レイアウトが崩れるということが多々起きる。
また、positionがstaticでないと適用されない点は注意。
要素を均等配列させるのであれば、floatを使わず、
display:flexを利用する方法があるので使ってみよう！
とりあえず、ここではfloatを使ったケースでの対処例を紹介。
floatにより、後続の要素が崩れるケースの対処
<html>
<head>
<style type="text/css">
.border {
border:medium solid #000000;
}
img {
float:left; //1.後続のdiv要素も右に回り込むようになるため、後続の要素と重なってしまう
}
#before_element {
overflow:hidden; //3.1と2で後続の要素は下になったが、画像はfloatで浮いた状態となっているため、
//before_elementの高さに含まれていない。
//overflow:hiddenと記載することで対処。
}
#after_element {
clear:both; //2.回り込みに必要がなくなった後続の要素でクリアする
}
</style>
</head>
<body>
<div id="before_element" class="border">
<img id="image" src="sample.jpg">
<p id="test">テスト文章です。</p>
</div>
<div id="after_element" class="border">
後続文章です。
</div>
</body>
</html>
floatにより、float部分の要素の高さが取れないことへの対処
clearfixという手法が知られている。
最終更新：2019年06月22日 14:35
