【css】border-bottomがコンテンツをうまく囲ってくれない場合の対処法

border-bottomがコンテンツをうまく囲ってくれず、期待した箇所よりも上に来て、コンテンツ内容に重なって表示される場合の対処法。

次の記述を追加。

———————-
overflow:auto
———————-

divの間にfloat:leftなどを使っていると起きる現象である。
floatは文字通り浮いてしまうので、floatした要素しかない持たない親要素は、空っぽの状態になり高さも0pxになってしまう。

ちなみにこの現象は IE11 では起きず、Opera では起こった。