floatした要素とその親要素の高さ・幅についての整理

floatした要素とその親要素の高さ・幅につての整理

1.block要素
高さ・幅を指定できる。
子を含むのに最低限の高さを持つ。幅は100%。

2.inline要素
高さ・幅を指定できない。
デフォルトでは子を含むのに最低限の高さ・幅を持つ

3.float要素
floatした要素は高さ・幅を指定できるようになる
親要素はfloatしている子要素の高さ・幅を自身の高さ・幅の計算に含めない。

html
<div>
<a style="background-color:blue; padding:10px;">
  <span style="width:100px; height:100px; background-color:yellow;">子要素</span>
  <span style="float:left; width: 100px; height: 100px; background-color: red;">Float子要素</span>
</a>
</div>

「inlineで青の親要素(※パディングあり)」が
「inlineで黄の高さ100px * 幅100px の子要素」と
「inlineで赤の高さ100px * 幅100pxのfloatした子要素」を含んでいます。

結果

image.png
① floatしていないinline要素の高さ・幅指定は無効
② floatしているinline要素の高さ・幅指定は有効
③ 親要素は、floatしていない要素のみ高さ・幅の計算に含めている。
(但し、親要素がoverflow:hiddenやautoに指定している場合はfloat要素も高さ・幅の計算に含めます。)

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.