CSSのフロートプロパティを指定していない要素が移動するのかわからない

理解できないこと

CSSのフロートプロパティの考え方の質問です。
要素を横並びにするために、HTML①のようなコードを組み、CSS①のようなプロパティを設定しました。

listをfloat:left;にすると、Progateというロゴの下に、liの要素が横並びになるのは理解できます。
ですが、header-logoをcssでfloat:left;と指定して、なぜlist要素の左に並ぶのかが理解できません。

header-logoをfloat:left;と指定しても、header-listには影響がないはずなのに、どうしてそのように、
listの位置も変わるのでしょうか？

２段で表示されるのかと思っていました。

###HTML①

html
1<div class="header">
2      <div class="header-logo">Progate</div>
3      <div class="header-list">
4        <ul>
5          <li>プログラミングとは</li>
6          <li>学べるレッスン</li>
7          <li>お問い合わせ</li>
8        </ul>
9      </div>
10    </div>

###CSS①

css
1li {
2  list-style: none;
3  /* floatプロパティをleftにしてください */
4  float:left;
5  
6}
7
8.header {
9  background-color: #f7f2b4;
10  height: 90px;
11}
12
13/* header-logoの文字の大きさを36px、floatプロパティをleftにしてください */
14.header-logo
15  {
16    font-size:36px;
17    float:left;
18  }
19  
20  
21

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

回答4件

header-logoをfloat:left;と指定しても、header-listには影響がないはずなのに

はい、そのとおりです。開発ツールで見てみれば、header-listが左端から存在することがわかるかと思います。

ただし、header-listの中身は、floatで入り込んできたheader-logoを避けるように配置されます。

投稿2021/07/15 00:44

maisumakun

総合スコア145208

ベストアンサー

floatはクセがあるので理解するの始めは苦労しますよね。

floatは同階層の要素に影響します。
詳しい仕様はfloatで確認してほしいですが、、
自分はよく「floatを付けると要素が浮き上がるイメージ」と教わりました。

今回の場合だと<div class="header-logo">Progate</div>にfloat: left;を付けて浮き上がらせているので、下の<div class="header-list">が上に詰めようとしています。
しかし実際には<div class="header-logo">Progate</div>が存在しているので上付きの横並びとなってしまうのです。
イメージできましたでしょうか？

横並びを解除する方法はいろいろあるので、「float 横並び解除」のようなキーワードで検索してみてください。

また最近ではfloatはあまり使わなくなってきていてFlexboxなる便利なプロパティもありますのでこちらも調べてみるとよいかとおもいます。

投稿2021/07/15 01:01