CSS floatによレイアウト崩れ

今、cssでサンプルページをコーディングしている所なのですが
floatを使用した時に最後に回り込ませたブロックの横幅を画面いっぱいに指定しますと
その、ブロックがすでにあるブロックの下に回り込んだ状態で、画面いっぱいに表示されます。

具体的に言うと

まず、became gamersのブロックを上揃いの左側めいっぱいによせます。
次に、became gamersのブロックの右側にhomeブロックを回り込ませます。
今度は、homeブロックの右側に、menuブロックを回り込ませます。
そして、最後にmenuブロックの右側に、お問い合わせブロックを回り込ませて
お問い合わせブロックの横幅を画面いっぱいに表示させようとして

width:100%;を指定しました。

ですが、お問い合わせブロックが、became gamers、home、menu、ブロックの下に回り込んできて
その状態で横幅が画面いっぱいに表示されてしまいました。

ではなく、menuブロックの右横に回り込ませてその状態で、お問い合わせブロックを画面いっぱいに
表示させたいと思っています。

コーディングは次のように行いました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf8">
5    <title>sample</title>
6    </head>
7  <body>
8    <header>
9   <h1 class="nume1">BECAME GAMERS</h1>
10       <p class="nume1">HoMe</p>
11        <p class="nume1">MeNu</p>
12        <p class="nume1 nume2">お問い合わせ</p>
13   </header>
14     <section>
15      <h1 class="nume3">話題の超人気ゲームのマニアックな最新情報をいち早くお届け！</h1>
16       <h2>カテゴリ</h2>
17     </seciton>
18     <section>
19      <h1>ACTION</h1>
20     <p>ナルティメットストーム 4</p>
21    <h1>RPG</h1>
22     <p>DARK SOULS III</p>
23      <h1>FPS</h1>
24        <p>FAR CRY PRIMLE</p>
25       <h1>RACE</h1>
26        <p>NEED FOR SPEED UNDER COVER 2</p>
27      </section>
28  </body>
29</html>

CSS
1 <style>
2    body{
3      margin:0;
4      text-align:center;
5    }
6    header{
7      text-align:left;
8    }
9    .nume1{
10      background-color:black;
11      color:white;
12      border-left-style:solid;
13      border-left-color:gold;
14      width:16.5%;
15      height:200px;
16      margin-top:-25px;
17      display:flex;
18      align-items:center;
19      float:left;
20    }
21    .nume2{
22      width:100%;
23    }
24    .nume3{
25      clear:both;
26    }
27    </style>

どなたか、解決策をご教示お願い出来ないでしょうか？？

宜しくお願い致します。

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

回答2件

floatさせる親要素に、擬似要素でclearfixを入れればイケるのではなかろうかと。

例えば、

html
1<ul>
2  <li></li>
3  <li></li>
4  <li></li>
5</ul>

このようなものがあるとして、liにfloat: leftで左寄せにしたら、floatしてますからulに高さが無くなります。
そこで、

css
1ul::before,
2ul::after {
3  content: "";
4  display: table;
5}
6ul::after {
7  clear: both;
8}

とするとあら不思議、ulに高さができます。

clearfixのサンプル

投稿2016/06/08 19:38

hidekichi

総合スコア366

floatであれば全体が100%になるよう、
ブロックを%指定する必要があります。
横に並ばせるレイアウトとして下記がありますが、
今回のケースであればdisplay:table,table-cellを使用したレイアウトがおすすめです。

▽横並べするプロパティ
・float
・diasplay:inline
・display:inline-block
・display:table & display:table-cell
・flex

css
1<style>
2    body{
3      margin:0;
4      text-align:center;
5    }
6    header{
7      text-align:left;
8	  display: table;
9	  width: 100%;
10    }
11	header h1,
12	header p {
13		display: table-cell;
14		vertical-align: middle;
15	}
16    .nume1{
17      background-color:black;
18      color:white;
19      border-left-style:solid;
20      border-left-color:gold;
21      width:16.5%;
22      height:200px;
23      margin-top:-25px;
24    }
25    .nume2{
26    	
27    }
28    .nume3{
29    	
30    }
31</style>