回答編集履歴
2
なんかバグった
answer
CHANGED
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
- display: flow-root
|
|
27
27
|
- ...
|
|
28
28
|
>
|
|
29
|
+
>
|
|
29
30
|
[ブロック整形コンテキスト - 開発者ガイド | MDN](https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Block_formatting_context)
|
|
30
31
|
|
|
31
32
|
ここでは、`display: flow-root`を使っています。
|
1
追記
answer
CHANGED
|
@@ -13,4 +13,20 @@
|
|
|
13
13
|
/* position: absolute; */
|
|
14
14
|
display: flow-root; /* 追加 */
|
|
15
15
|
}
|
|
16
|
-
```
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
`position: absolute`を消すだけだと、内部の要素がフロートしているため、高さを失って潰れますので、適切にブロック整形コンテキストを生成する必要があります。
|
|
19
|
+
|
|
20
|
+
> ブロック整形コンテキストは、以下のうちの少なくとも一つから生成されます。
|
|
21
|
+
>
|
|
22
|
+
- 文書のルート要素 (<html>)
|
|
23
|
+
- ...
|
|
24
|
+
- 絶対位置指定の要素 (position が absolute または fixed である要素)
|
|
25
|
+
- ...
|
|
26
|
+
- display: flow-root
|
|
27
|
+
- ...
|
|
28
|
+
>
|
|
29
|
+
[ブロック整形コンテキスト - 開発者ガイド | MDN](https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Block_formatting_context)
|
|
30
|
+
|
|
31
|
+
ここでは、`display: flow-root`を使っています。
|
|
32
|
+
歴史的には`clearfix`や`overflow: hidden`などが使われてきたので、そちらでもいいでしょう。
|