html,CSSのfloatについて教えてください。

◆html◆
<div class="footer">
<div class="footer-logo">Progate</div>
<ul>
<li>会社概要</li>
<li>採用</li>
<li>お問い合わせ</li>
</ul>
</div>

◆CSS◆
.footer {
height: 120px;
background-color: #2f5167;
color: #fff;
padding: 40px;
}
.footer-logo {
float: left;
font-size: 32px;
}

.footer li {
float: right;
}

footer-logoを左側に、liの3つを右側に縦に3つ並ぶようにしたいのですが、これだとliが右側に横並びになってしまします。なぜでしょうか。

No.3 回答者： wanderer1 回答日時： 2022/03/11 16:19

htmlに記述されているliすべてにfloat:right;が適用されるからです。

liの次のliにも、その次のliにもすべてfloat:right;が効くんですよ。

ですからliが右寄せになって、次のliも右寄せにされて、さらに右寄せになる、ということが繰り返されるわけです。

liじゃなくて、その上のかたまりであるulをfloat指定することで、liのかたちはいつもと同じように見せてくれることになります。

ただお書きになっている方法でのレイアウトは今主流ではなく、display:flex;を使うほうが多いんじゃないかなと思います。

floatはすごく昔から利用されてきた、ある意味ハック的な方法なんですが、clearの入れ方で悩むケースが多いと思いますので、使わなくなっているんじゃないでしょうか。

No.2 回答者： fujillin 回答日時： 2022/03/11 10:13

No1です。

＞li要素ではできないのはなぜでしょうか。。。。
CSSには、質問者様のことを忖度するような仕組みがないからです。

No.1 回答者： fujillin 回答日時： 2022/03/10 23:43

こんばんは

li要素ではなく、ul要素を floatすれば良いのでは？

.footer ul { float: right; }

この回答へのお礼

出来ました！ありがとうございます。
li要素ではできないのはなぜでしょうか。。。。

お礼日時：2022/03/11 10:06