回答編集履歴

2

なんかバグった

2020/06/10 07:21

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36960

test CHANGED
@@ -54,6 +54,8 @@
54
54
 
55
55
  >
56
56
 
57
+ >
58
+
57
59
  [ブロック整形コンテキスト - 開発者ガイド | MDN](https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Block_formatting_context)
58
60
 
59
61
 

1

追記

2020/06/10 07:21

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36960

test CHANGED
@@ -29,3 +29,35 @@
29
29
  }
30
30
 
31
31
  ```
32
+
33
+
34
+
35
+ `position: absolute`を消すだけだと、内部の要素がフロートしているため、高さを失って潰れますので、適切にブロック整形コンテキストを生成する必要があります。
36
+
37
+
38
+
39
+ > ブロック整形コンテキストは、以下のうちの少なくとも一つから生成されます。
40
+
41
+ >
42
+
43
+ - 文書のルート要素 (<html>)
44
+
45
+ - ...
46
+
47
+ - 絶対位置指定の要素 (position が absolute または fixed である要素)
48
+
49
+ - ...
50
+
51
+ - display: flow-root
52
+
53
+ - ...
54
+
55
+ >
56
+
57
+ [ブロック整形コンテキスト - 開発者ガイド | MDN](https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Block_formatting_context)
58
+
59
+
60
+
61
+ ここでは、`display: flow-root`を使っています。
62
+
63
+ 歴史的には`clearfix`や`overflow: hidden`などが使われてきたので、そちらでもいいでしょう。