floatで要素を横並びにしたい

<main>部分を左手に、サイドバーとして<aside>部分を<main>の右手に配置したい。 <main>と<aside>で横幅は合計100%、marginもなし。キレイに横並びになってくれると思ったのですが、下の画像のように並んでしまいます。どうしたら横並びにできるでしょうか？

css
1    .container{
2      max-width: 1200px;
3      margin: 0;
4      padding: 0em;
5    }
6
7    main{
8      float:left;
9      background-color: gray;
10      width: 70%;
11      margin: 0;
12    }
13
14    aside{
15      background-color: yellow;
16      width: 30%;
17      box-sizing: border-box;
18      margin: 0;
19    }

HTML
1<body>
2  <div class="container">
3    <main>
4      <p>abcabcabacabcabcabacabcabcabacabcabcabacabcabcabacabcabcabacabcabcabcabcabacabcabcabbcabcabac
5      </p>
6    </main>
7    <aside>
8      <p>def</p>
9    </aside>
10  </div>
11</body>

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

回答3件

横並びは、今なら CSS Flexbox を使うのがお勧めです。

css
1.container{
2  max-width: 1200px;
3  margin: 0;
4  padding: 0em;
5  display: flex;
6}
7
8main{
9  background-color: gray;
10  width: 70%;
11  margin: 0;
12}
13
14aside{
15  background-color: yellow;
16  width: 30%;
17  box-sizing: border-box;
18  margin: 0;
19}

投稿2020/04/22 13:38

hatena19

総合スコア33699

maleon

2020/04/23 11:51

ありがとうございます！確かにflexboxの方がはるかにラクですね。なんかfloatの存在を知っているのに、上手く使えないのが悔しかったんです...

hatena19

2020/04/23 11:59

float は横並びのための機能ではなくテキストの回り込みを指定するのが本来の機能です。そのため、clear: left と適切な箇所で回り込みを解除しないとレイアウト崩れの原因になります。 https://developer.mozilla.org/ja/docs/Web/CSS/float 以前はflexのような横並びのための機能がなかったので代替手段として使っていました。現在では、flex や grid などのレイアウト機能が実装さているので本来の回り込み以外で使う必然性はほとんどないです。

maleon

2020/04/23 12:09

なるほど！分かりやすい説明ありがとうございます。ではテキストを回り込ませたいときこそ、floatの出番なんですね。なんでfloatが存在しているのか、よく分かってませんでした。

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

ベストアンサー

aside のスタイルに float: right;またはfloat: left; 追加で横並びになりません？

投稿2020/04/22 13:34

退会済みユーザー

総合スコア0

maleon

2020/04/23 11:47

ありがとうございます！確かに上手くいきました。昨日からモヤモヤしてたので助かりました！

maleon

2020/04/23 12:05

すいません。もし良ければ、教えてもらえませんか？ <aside>が<main>の下に潜り込む、とかなら分かるんですが、・なぜ修正なしだと<aside>は<main>の下に並ぶのか？・なぜ<aside>にfloatをつけると横並びになるのか？しばらく考えてみましたが、分かりません...

退会済みユーザー

2020/04/23 12:20

floatを付けた要素は、実際は高さがあるのに無いことになってしまうんです。 float=浮くという意味ですが、要素がフワフワ中に浮いていて高さが認識されない感じでしょうか。（幽霊みたいに？）不思議ですよね。なので、子要素をラップした親要素の高さも無くなってしまい、以降の要素が上にズレたりします。それを回避するために、親にoverflow: hidden;の指定を付けたり、昔はclearfixというテクニックが定番でした。こんな感じで、floatはちょっと癖が強いので、最近はなるべくflexboxを採用する人が多い傾向にあります。

hatena19

2020/04/23 12:22

・なぜ修正なしだと<aside>は<main>の下に並ぶのか？ https://developer.mozilla.org/ja/docs/Web/CSS/float > テキストやインライン要素がその周りを回りこめるように定義します。 <aside>はインライン要素ではないからです。・なぜ<aside>にfloatをつけると横並びになるのか？ https://developer.mozilla.org/ja/docs/Web/CSS/float > left 要素は、必ずその包含ブロックの左側に浮動します。マニュアルを読み込みましょう。

maleon

2020/04/24 04:45

Lishさん hatena19さんお二人ともありがとうございます！親要素の高さが無くなる。そして回り込むのはインライン要素。 <aside>はインライン要素ではないから、何もしなければ回り込んでくれないわけですね。よく分かりました！極力この目的の場合はflexboxを使うことにします。敷居が高い気がして避けていたんですが、確かにマニュアルと、その文言を読み込んだ方が良さそうですね。お二人ともありがとうございます！

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

css
1aside{
2  background-color: yellow;
3  width: 30%;
4  box-sizing: border-box;
5  margin: 0;
6  float: left; /* 追加 */
7}

投稿2020/04/22 13:29

soliste16

総合スコア757

maleon

2020/04/23 11:48

ありがとうございます！上手くいきました。色々試してたんですけど、こんなシンプルな方法で解決するとは...

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

floatで要素を横並びにしたい

関連した質問