ヘッダ（横並び）の作り方について

質問

横並びメニューのヘッダーを作る例として、<div1>Text</div1><div2><ul><li></li><li></li></ul></div2>という構成※divの数字は便宜上で、cssで<li>&<div1>&<div2>にfloat:left指示する物ががありましたが、<div2>のfloat leftの役割が分かりません。
宜しくお願いします。

回答No.1

AsarKingChang · ベストアンサー

float:left を取ってみればわかりますよ。
それと、一番最後に、clear:both;もしているとは思いますが。
http://www.htmq.com/style/clear.shtml
通常、<OL>, <UL>などは、「縦に段組み」されます。
それを、1つ表示後に、下にではなく、横に詰めろって指示が
float:leftです。
しかし、それでは、全部が左詰めになるので、
最後にclearを行い「ここで終わりだよ！」と教えてる感じになります。
ただ、それだと、左に詰められない場合や、自動回り込みが
発生することもあり、あなたの言うdiv2はサイズがないのが特徴です。
本格的にデザインをやりだすとこのサイズがない問題にぶつかりますが。
要素を強制的にブロック要素にするやり方や、
https://www.indetail.co.jp/blog/8134/
FlexBOXなどの手法もあり、どれがいいとは言い切れませんが、
カンプ単位で、最適なものを選ぶところから
コーディングがスタートすることもよくありますね。

ということで、回答は
「通常縦に配置される要素を強制的に、左詰めするCSSです」
となります。

お礼

学習教材の学習途中なので、続きが有るのかもしれません。clear:both;も有りませんでした。ありがとうございます。

補足

それが取ってみても分からなかったのです。<li>は、複数要素を横並びにして左詰にしますよね。<div1>は、<div2>と横並び且つその左に置きますよね。この時点で、<div1>のtextと<div2>のli要素はすべて横並びになっていますよね。そして、テキストは何も指示しなければ左詰だから、<div2>はもともと左に寄ってますよね。<div2>をわざわざfloat:leftする意味がわからないです。