floatした部分のbackgroundが効かない

前提・実現したいこと

floatさせた部分のbackgroundが効かない

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6
7	<title>練習</title>
8
9	<link rel="stylesheet" type="text/css" href="css/base.css">
10</head>
11	
12<body>
13	<div class="nav">
14            <ul class="list">
15                <li><a href="#">a</a></li>
16                <li><a href="#">b</a></li>
17                <li><a href="#">c</a></li>
18                <li><a href="#">d</a></li>
19                <li><a href="#">e</a></li>
20            </ul>
21        </div>
22
23	
24</body>
25</html>

css
1ul {
2	list-style: none;
3}
4
5/*.nav {
6	overflow: auto;
7	overflow: hidden;
8}*/
9
10.nav ul {
11	background: red;
12}
13
14.list li {
15	float: left;
16	margin: 0 10px;
17}
18

自分で調べたことや試したこと

navクラスにoverflow:auto; overflow:hidden;をあててみましたが、
できませんでした。（cssのコメントアウト部分の２つを試しました）

調べてもわからなかったため質問させていただきます。
よろしくお願いします！

行動規範の内容に同意します

回答1件

ベストアンサー

ul要素の中身であるliがfloatしているので、
ul要素は高さが0pxになってしまっていると思われます。

高さが存在しないので背景を変更する領域も存在しないということです。

ul要素にheightを設定してあげるとどうでしょうか？？

投稿2020/08/14 08:41

phiar_poet

総合スコア230

kaiokaio

2020/08/14 09:00

できました！ floatすると高さが0になるんですね。ありがとうございました！

phiar_poet

2020/08/14 12:13

子要素がfloatだと親の高さが0になる、というのは正確ではないです。今回の例ではfloatの子要素しか存在しないので高さが0になっているだけで、 floatではない他の子要素がいればその要素の高さが親の高さになると思います！簡単なことしかお答えできませんが、また何かありましたら回答させていただきます。

行動規範の内容に同意します