floatが効かない

Question

現在、摸写をしております。
HTMLを見直したり、コードを入れなおしたり、検索したりと作業しましたが
原因が分かりません。
分かる方、原因を教えていただけないでしょうか。

](a832e2cdc149a46da00b6a235d2998bf.png)
float-leftで左に寄せたいです。

HTML

<div class="serach-wrapper"> <form action=""> <input class="search" name="q" type="text" placeholder="検索…" /> </form> </div>

CSS
.search-wrapper {
height: 40px;
display: inline-block;
float: right;}

返答ありがとうございます。
親要素は<header>です。
ホームとページはfloatで並べています。
よろしくお願いいたします。

<header> <div class="container"> <div class="header-left"> <h1><a href="#">Write</a></h1> <p>書くためのテーマ</p> </div> <div class="header-right"> <div class="header-nav"> <ul class="gnav"> <li><a href="#">ホーム<span class="fas fa-angle-down"></span></a> <ul> <li><a href="/">→カスタマイズ</a></li> </ul> </li>

    <li><a href="#">ページ<span class="fas fa-angle-down"></span></a>
     <ul>
       <li><a href="/">アイキャッチ画像無しのページ</a></li>
       <li><a href="/">ページ（全幅テンプレート）</a></li>
     </ul>
   </li>

   <li><a href="#">タイポグラフティ</a></li>
   <li><a href="#">お問い合わせ</a></li>
   </ul>

   <div class="search-wrapper">
    <form action="">
      <input class="search" name="q" type="text" placeholder="検索…" />
    </form>
  </div>
 </div>

</div> </div> </header>

.header-left {
float: left;
}

.header-right {
padding-top: 45px;
float: right;
}

Comments

[nieve]

親や兄弟要素って、どういう構成ですか？
「ホーム」や「ページ」はどうやって横並びを実現しているのでしょう？？

Answer 1

追記、ありがとうございます。
ただ、いただいた内容だと、

「ホーム」や「ページ」などのメニューと検索は横並びにならず、
縦に並ぶと思うので、たぶんなにかが抜けていますね。。。

できるだけ、今考えた状態からちょっと修正して。。。の方がよいのかな？
とも思ったのですが、方針を変えて、そもそも違うやり方をご紹介します。

こういったメニュー部分を横並びにして横位置にするには、
FlexLayoutを利用した方が取り扱いがしやすいかと。

参照：
■FlexLayoutの基礎というか、概要というか↓
https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

■ご提示されているようなレイアウトに対するFlexLayoutの活用↓
https://coliss.com/articles/build-websites/operation/css/flexbox-aligning-with-auto-margins.html

昔は横並びにするのにいろいろハックが必要だったようですが、
現在はいろいろやりやすくなっています。
floatは結構クセが強いので、
本来の用途である、段落文章の中に図や画像を挿入するときに使う
にとどめたほうが良いかもしれません。

もし、↑というのをわかっていて、floatを使い倒そう、floatのクセをつかもう
という意図で今回の質問内容のことを行っていらっしゃるのでしたら、
的外れな回答、失礼をいたします。

Comments

[yamada1213]

ご丁寧にありがとうございます。
nieve様がおしゃっていた通り、抜けがありました。
floatは難しいですね。
リンクまでありがとうございます。今後はFlexを利用してみます！
ありがとうございました。