フロート配置の表示とマージン

1.通常フロー配置

フロートボックスは、その外辺が包含ブロックもしくは他のフロートボックスの外辺に接するまで勿忘草左(右へなら右)に移動します。

行ボックスがある場合は、フロートボックスの上外辺は行ボックスの上辺に合わされます。先行する他のフロートボックスがあって余白が不足する場合は、フロートボックスは下に移動して配置されます。

2.フロート配置margin: 0

フロートボックスは、その外辺が包含ブロックもしくは他のフロートボックスの外辺に接するまで勿忘草左(右へなら右)に移動します。

行ボックスがある場合は、フロートボックスの上外辺は行ボックスの上辺に合わされます。先行する他のフロートボックスがあって余白が不足する場合は、フロートボックスは下に移動して配置されます。

3.両方の行ボックスmargin: 1em

フロートボックスは、その外辺が包含ブロックもしくは他のフロートボックスの外辺に接するまで勿忘草左(右へなら右)に移動します。

行ボックスがある場合は、フロートボックスの上外辺は行ボックスの上辺に合わされます。先行する他のフロートボックスがあって余白が不足する場合は、フロートボックスは下に移動して配置されます。

4.フロート画像margin: 1em

フロートボックスは、その外辺が包含ブロックもしくは他のフロートボックスの外辺に接するまで勿忘草左(右へなら右)に移動します。

行ボックスがある場合は、フロートボックスの上外辺は行ボックスの上辺に合わされます。先行する他のフロートボックスがあって余白が不足する場合は、フロートボックスは下に移動して配置されます。

5.インラインボックスに負のマージン
margin-left: -2em

フロートボックスは、その外辺が包含ブロックもしくは他のフロートボックスの外辺に接するまで勿忘草左(右へなら右)に移動します。

行ボックスがある場合は、フロートボックスの上外辺は行ボックスの上辺に合わされます。先行する他のフロートボックスがあって余白が不足する場合は、フロートボックスは下に移動して配置されます。

6.インラインボックスをフロート配置
float:left; margin:1em

フロートボックスは、その外辺が包含ブロックもしくは他のフロートボックスの外辺に接するまで勿忘草左(右へなら右)に移動します。

行ボックスがある場合は、フロートボックスの上外辺は行ボックスの上辺に合わされます。先行する他のフロートボックスがあって余白が不足する場合は、フロートボックスは下に移動して配置されます。

7.後続の行ボックス
clear:left; margin: 1em

フロートボックスは、その外辺が包含ブロックもしくは他のフロートボックスの外辺に接するまで勿忘草左(右へなら右)に移動します。

行ボックスがある場合は、フロートボックスの上外辺は行ボックスの上辺に合わされます。先行する他のフロートボックスがあって余白が不足する場合は、フロートボックスは下に移動して配置されます。

8.後続の行ボックス
clear:left; margin-top: 4em

フロートボックスは、その外辺が包含ブロックもしくは他のフロートボックスの外辺に接するまで勿忘草左(右へなら右)に移動します。

行ボックスがある場合は、フロートボックスの上外辺は行ボックスの上辺に合わされます。先行する他のフロートボックスがあって余白が不足する場合は、フロートボックスは下に移動して配置されます。

9.先行の行ボックス
overflow: hidden; margin: 0

フロートボックスは、その外辺が包含ブロックもしくは他のフロートボックスの外辺に接するまで勿忘草左(右へなら右)に移動します。

行ボックスがある場合は、フロートボックスの上外辺は行ボックスの上辺に合わされます。先行する他のフロートボックスがあって余白が不足する場合は、フロートボックスは下に移動して配置されます。

10.先行の行ボックスoverflow: hidden;
後続の行ボックス margin: 1em

フロートボックスは、その外辺が包含ブロックもしくは他のフロートボックスの外辺に接するまで勿忘草左(右へなら右)に移動します。

行ボックスがある場合は、フロートボックスの上外辺は行ボックスの上辺に合わされます。先行する他のフロートボックスがあって余白が不足する場合は、フロートボックスは下に移動して配置されます。

11.後続の行ボックス
overflow: hidden; margin: 0

フロートボックスは、その外辺が包含ブロックもしくは他のフロートボックスの外辺に接するまで勿忘草左(右へなら右)に移動します。

行ボックスがある場合は、フロートボックスの上外辺は行ボックスの上辺に合わされます。先行する他のフロートボックスがあって余白が不足する場合は、フロートボックスは下に移動して配置されます。

12.後続の行ボックス
overflow: hidden; margin: 1em

フロートボックスは、その外辺が包含ブロックもしくは他のフロートボックスの外辺に接するまで勿忘草左(右へなら右)に移動します。

行ボックスがある場合は、フロートボックスの上外辺は行ボックスの上辺に合わされます。先行する他のフロートボックスがあって余白が不足する場合は、フロートボックスは下に移動して配置されます。