Web制作実験「floatを解除する4つの方法」の実験
PCでご覧の方はウインドウ幅を広げたり狭めたりしてみてください。
float解除なし
boxA
Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ
boxB
Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ
boxC
Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ
【1】次の要素にclearプロパティ
boxCにclear:bothを指定しました。
boxA
Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ
boxB
Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ
boxC
Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ
上記【1】でboxBの内容が多い場合
boxA
Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ
boxB
Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ
boxC
Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ
【2】空divにclearプロパティ
boxBの後にclear:bothを指定した空divを追加しました。
boxA
Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ
boxB
Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ
boxC
Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ
【3】divで囲いoverflowプロパティ
boxA/Bをdiv（紫）で囲い、overflowを指定しました。
boxA
Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ
boxB
Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ
boxC
Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ
【4】divで囲いclearfix（クリアフィックス）
boxA/Bをdiv（紫）で囲い、clearfixを指定しました。
boxA
Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ Ａ
boxB
Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ Ｂ
boxC
Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ Ｃ