A…Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
B…Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
C…Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
D…Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
  1. ボックスBを左にフロートしました。幅は親(#container)の40%にしました。
  2. Bをフロートすると通常フローは崩れて後続のボックスC,DがフロートしたボックスBが存在しないかのようにボックスBの後ろに入りボックスAの下に通常フローします。
  3. ボックスC,Dの中のインライン要素のテキストがボックスBの幅のだけ領域を確保するように幅が調整されました。
  4. フロートするボックスのマージンは他のボックスのマージンと相殺されません。上下に隣接するAとBのボックスのマージンに着目してください。