また、clearプロパティの原理としては、margin-topを自動的に浮動化した要素の高さまで調整するような振る舞いをします。「floatを解除する」というよりも、「floatの影響の及ばない範囲まで調整する」というイメージの方が理解しやすいかもしれません。 2. 親要素がはみ出してしまう See the Pen clear properties by makotofukuda (@mfukuda) on CodePen. 最初の解説のようにfloat要素は浮動化しているため、実は通常のフローから外れるような振る舞いになります。 これが原因のため、要素自体の高さはあっても、描写領域としては認識されないため、親要素からはみ出してしまうような表示になってしまいます。 この現象は「1. floatは勝手に解除されない」でclearプロパティを使用したように、親要素の内側で何かしらの要素を使って
![今更聞けない!エンジニアのための CSS の基礎講座 横並び(float)レイアウト編 | 株式会社ヌーラボ(Nulab inc.)](https://cdn-ak-scissors.b.st-hatena.com/image/square/15c319c5cc249a5e2605258a33a3da25921e743d/height=288;version=1;width=512/https%3A%2F%2Fd19ta9rijs3cxg.cloudfront.net%2Fwp-content%2Fuploads%2Fsites%2F2%2F2016%2F05%2Fmain.png)