cssのfloatとclearfixについて

今更ながら、jqueryをある書籍にて学習しているのですがCSSについてわからないことがあるのでどなたかご教授ください。
階層型メニューを制作する学習にて
htmlは

       <div class="container">
            <ul class="main">
                <li>
                    <a href="#">TOP</a>
                </li>
                <li>
                    <a href="#">GALLERY</a>
                    <ul class="sub">
                        <li><a href="#">PICTURE</a></li>
                        <li><a href="#">PHOTO</a></li>
                        <li><a href="#">OTHER</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">GUIDE</a>
                    <ul class="sub">
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">FORUM</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">OTHER</a>
                    <ul class="sub">
                        <li><a href="#">BLOG</a></li>
                        <li><a href="#">TWITTER</a></li>
                        <li><a href="#">FACEBOOK</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">ABOUT</a>
                    <ul class="sub">
                        <li><a href="#">COMPANY</a></li>
                        <li><a href="#">RECRUIT</a></li>
                        <li><a href="#">CONTACT US</a></li>
                    </ul>
                </li>
            </ul>
        </div>

途中ですが2段階のメニュー画面を制作中です。
css

.container ul{
    list-style:none; 
    padding:0;  
}

.container{
    width:900px;
    margin:0 auto;
}

ul.main li{
    width:150px;
    height:38px;
    text-align: center;
    line-height:38px;
    float:left;
    background-color: hotpink;
    background-image: url("../images/01_02/btn_off.png");   
}

ul.main li > a{
    display: block;
    text-decoration: none;
    color:#fff;
}

cssも途中の段階ですがここまでで質問があります。

ul.main liにfloat:leftの設定がされていますのでメインメニューとサブメニューのliにfloat:leftが設定されています。
ブラウザで表示してみるとサブメニューが横並びにならないのは親要素のliの幅とメニューliが同じなため1つしか収まらないので縦に並ぶようになっているためでしょうか。

次に、clearfixの説明があり「このままだとメニューがどんどん回り込んでしまうので以下のように
clearfix手法を用いる」と説明されているのですがメニューがどんどん回り込むという表現は多分メインメニューの領域に対してサブメニューが回り込むという表現だと思うのですが、書籍にある下記cssを実装しなくてサブメニューがメインメニューに重なりませんでした。

ul.main::after{
    content:"";
    display:block;
    clear:both;
}

floatを指定した要素は浮いてしまうため親要素の高さが認識できなくなる問題があるのでclearfix実装しないとul.main、ul.subの高さは0になってしまうと思うのですが（実際にツールで確認すると高さは0になっている）
サブメニューがメインメニューに重ならないのはul.subの親要素がmainのliでsubのulの前にブロック要素に指定されていて高さも指定されているa要素の後に記述されているためメインメニューに重ならないのではないかと解釈したのですが自分の考えは間違っているのでしょうか。

上記の書籍の説明が「このままだとメニューがどんどん回り込んでしまうので以下のように
clearfix手法を用いる」とありますがサブメニューに対して必要な訳ではなくメインメニューの下に何かしらのコンテンツを記述する場合に必要になるのではないでしょうか。

cssも学習したてなので分からない事だらけなのでどなたかご指導いただけませんでしょうか。

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

回答1件

ベストアンサー

floatはそもそも対象の要素とテキストの回り込みの関係を変更するためのプロパティです。
一連の要素を横並びにするために作られたものではありません。
前時代でまだflexがなかった時代に仕方なく編み出されたバグ技のようなものです。

本来の使用方法はmozillaの当該ページで確認してください。このようなレイアウトを実現するために使います。
https://developer.mozilla.org/ja/docs/Web/CSS/float

今はflexで同等以上のことができるのでflexを使うべきです。
下記のような簡単な指定で親メニューを横並びで表現できます。

css
1ul.main{
2  display: flex;
3}
4ul.main>li{
5  list-style: none;
6  margin-right: 2em;
7}

現代はこのように記載するのがスタンダードです。

今お読みの本は古い本でしょうか。10年くらい前の書籍だと思われます。現在はfloatで横並びメニューを実装する必要性はありません。最新のCSS事情が書かれた書籍で勉強すべきでしょう。
JQueryもバージョンが上がるたびに全く別物のようなものになっているので、あまり古い本で勉強しない方が良いかもしれません。

投稿2021/05/20 16:34

hope_mucci

総合スコア4447

doradora2525

2021/05/21 04:25

ご回答ありがとうございます。ご指摘の通りちょうど10年前の書籍です。ネットで勧められていたので購入したのですが、確かにjqueryの文法も古いので（onメソッドなどが説明されていない）ネットで補完しながら学習しています。 floatが現在推奨されていなくdispaly:flexが推奨されていることは存じ上げております。できるだけ書籍に合わせて一度作った上で、display:flexを使って作り直そうかと思っていました。利用している書籍のCSSの説明がわかりずらく首をかしげる部分が多いのでここで質問してみました。 floatは切り捨てdisplay:flexを使って作ってみます。ご回答ありがとうございました。

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