要素の重なりをなくしたい

下記のコードなのですが、floatをleftとrightに設定しているので、liの要素が重なってしまっているところは理解できます。

そして、clearでfloatを解除することも分かるのですが、どこに設定していいものかが分かりません。<header-left>の閉じタグの上に<div class="clear">を作成し、CSSでclear: leftを設定してもできませんでした。

floatが両方に設定されているとclearが設定できないという記事もみたのですが、そうなってくるとflexboxで右と左を分けると良いのでしょうか。

ご回答よろしくお願い致します。

添付画像の１枚目が、現在の状況で、２枚目が完成物です。

HTML
1    <header>
2      <div class="container">  
3        <div class="header-left">
4          <img src="img/siteTitle.png">
5        </div>
6        <div class="header-right">
7          <p>“地域に根付いた歯科医院” デンタル クリニック</p>
8          <p><span class="fas fa-phone-alt"></span>03-0000-0000</p>
9          <p>予約受付時間 10:00～19:30 <span class="holiday">日祝 休診</span></p>
10        </div>
11        <div class="site-navi">
12          <ul>
13            <li>
14              <p>トップページ</p>
15              <p>HOME</p>
16            </li>
17            <li></li>
18            <li></li>
19            <li></li>
20            <li></li>
21          </ul>
22        </div>
23      </div>
24    </header>
25

CSS
1* {
2  margin: 0;
3}
4
5.container {
6  max-width: 930px;
7  margin: 0 auto;
8}
9
10.header-left {
11  float: left;
12}
13
14.header-right {
15  float: right;
16}
17
18

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

回答1件

ベストアンサー

flexboxで行うことをお勧めします。
floatでも .header-right:after に clear: both でおそらく解決するとは思いますが、今現在cssの時流としてfloatはほとんど使用されないため、floatで実装するメリットが少ないです。

flexboxだと、

html
1    <header>
2      <div class="container">  
3        <div class="flex-container">
4          <div class="header-left">
5            <img src="img/siteTitle.png">
6          </div>
7          <div class="header-right">
8            <p>“地域に根付いた歯科医院” デンタル クリニック</p>
9            <p><span class="fas fa-phone-alt"></span>03-0000-0000</p>
10            <p>予約受付時間 10:00～19:30 <span class="holiday">日祝 休診</span></p>
11          </div>
12        </div>
13        <div class="site-navi">
14          <ul>
15            <li>
16              <p>トップページ</p>
17              <p>HOME</p>
18            </li>
19            <li></li>
20            <li></li>
21            <li></li>
22            <li></li>
23          </ul>
24        </div>
25      </div>
26    </header>

css
1* {
2  margin: 0;
3}
4
5.container {
6  max-width: 930px;
7  margin: 0 auto;
8}
9
10.flex-container {
11  display: flex;
12}
13
14.header-left {
15  flex: 1 0 auto;
16}
17
18.header-right {
19  flex: 0 1 auto;
20}