HTML / CSS

floatの本質を探ろう!

本当のfloatの挙動は理解していますか?それが今回の問題で理解できるようになります。

問題: 1


最初に


以下のようなページについて考えます。


html
<div class="square1">
  square1
</div>
<div class="square2">
  square2
</div>
<div class="square3">
  square3
</div>

css
.square1 {
  width: 100px;
  height: 100px;
  background-color: #aaa;
}

.square2 { width: 100px; height: 100px; background-color: #888; }
.square3 { width: 100px; height: 100px; background-color: #666; }

https://tech-drill.s3.amazonaws.com/uploads/questions/images/3ebe7e9ab732fdfccb96f6ab366c0e29.png


問題


この状態でsquare1に対しfloat: left;をあてると以下のようになります。


https://tech-drill.s3.amazonaws.com/uploads/questions/images/3e09bb04d6989c6c6990068407c79bae.png


この状況について簡単に説明してください。
(ちなみに、「回り込みしていないのではないか」と聞かれたらなんと答えますか?)

問題: 2

さらに、square3に対しfloat: right;をあてると以下のようになります。


https://tech-drill.s3.amazonaws.com/uploads/questions/images/ce09750d2c7ff9f9811b2a02ba558baf.png


この状況について簡単に説明してください。

問題: 3

さらに、square2のheight: 100px;を消すと以下のようになります。


https://tech-drill.s3.amazonaws.com/uploads/questions/images/df4c84ffb8ae5caf7bdc836ffd78c956.png


この状況について簡単に説明してください。