float: leftするとどうなるか


See the Pen used floatleft by nakanishi (@nakanishi) on CodePen.

.box {
  float: left;
}

.box2 {
}

.box3 {
  float: left;
}

この記事に関しては、CodePenのデモは元のサイトでブラウザの横幅を広くし確認いただきたい。

boxとbox2の比較

float: leftすると、それに続くコンテンツが右側に流れていく。floatしない場合には、divはブロック要素なので、次に続くコンテンツは改行された後に配置される。

boxとbox3の比較

float: leftした要素の、前と後ろの両方にコンテンツがある場合、float: leftした要素は、前のコンテンツが終わった後の高さ?で、左端に寄る。

box4とbox5の比較

float: leftした要素の、次のコンテンツに固定の幅を指定した場合としない場合の違い。これを見るとfloatの性質が容易に理解できる。floatされたボックスは浮き、次に続くボックスが背面にめり込む。ただし背面にめり込んだボックスのコンテンツは「floatされたボックスを避けるように」配置される。

1 thought on “float: leftするとどうなるか”

Leave a Reply

Your email address will not be published. Required fields are marked *