この記事について
| 環境 | css(float使用)、Opera |
|---|---|
| 目的 | border-bottomが期待した箇所より上に来てコンテンツに重なるのを直す |
| 結果 | 親要素にoverflow:autoを追加して解決 |
つまずきポイント要約
- floatした要素しか持たない親要素は空っぽ扱いで高さ0pxになる
- この現象はIE11では起きず、Operaでは起こった
事象
border-bottomがコンテンツをうまく囲ってくれず、期待した箇所よりも上に来て、コンテンツ内容に重なって表示される場合の対処法。
対処
次の記述を追加。
overflow:auto原因
divの間にfloat:leftなどを使っていると起きる現象である。
floatは文字通り浮いてしまうので、floatした要素しかない持たない親要素は、空っぽの状態になり高さも0pxになってしまう。
ちなみにこの現象は IE11 では起きず、Opera では起こった。
