【CSS】floatが効かない(横並びにならない)原因と解決方法マンガでわかるホームページ作成ホームへ【CSS】floatが効かない(横並びにならない)原因と解決方法2022年01月26日float:leftを使うと要素を横並べできます。100%を超えているから下記は「float:left」を指定した上でそれぞれwidthを60%と70%にした例です。「float:left」を指定しているのに横並びできていません。70%</div></div>floatは「横に入るだけの空間があれば横に並べる」要素です。上記の場合は60%+70%で100%を超えており、横に入るだけの空間がないため横並びしません。横並びしたいのであれば横幅の合計値が親の幅を超えないようにしましょう。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む【原因2】borderとpaddingはwidthに含まれないからwidthの合計は100%以内なのに横並べにならないのであれば、borderとpaddingを忘れています。70%</div></div>borderとpaddingはwidthに含まれません。よって横幅は、(border-left-width)+(padding-left)+(width)+(padding-right)+(border-right-width)の合計になります。marginも指定していれば、margin-leftとmargin-rightも加わります。【解決方法】box-sizing:border-boxを指定するbox-sizing:border-boxを指定すると、borderとpaddingがwidthに含まれます。これでようやく横並びになりました。70%</div></div>なお、box-sizing:border-boxを指定しても、marginは含まないので注意してください。【CSS】marginとは?paddingとは?両者の違い・使い分けについてmarginとpaddingはボックスの余白を調整するCSSです。marginとpaddingの使い方や違いについて説明します。この記事を読む【解決方法2】display:flexに切り替える下記はfloatを使わず「display:flex」で横並びにした例です。70%</div></div>display:flexは子要素の位置調整をするCSSです。上記はbox-sizing:border-boxを指定していませんが、崩れていませんよね?floatは横幅が少しずれるとすぐ崩れて縦並びになってしまいますが、display:flexなら子要素の横幅の合計が親の幅を超えていても、自動で再計算して収まるようにしてくれます。floatは扱いが難しいためdisplay:flexで横並びにすることを強くオススメします。display:flexで解決できること9選!display:flexは便利らしいがどんなときに使えるのか。横並べを中心に、いろいろなことができるので覚えておきましょう。この記事を読む【原因3】clear:bothに問題があるからfloatとセットで使うclear:bothもヒトクセあります。clear:bothに問題がないか下記記事を確認してみてください。【CSS】clear:bothが効かない原因と解決方法clear:bothは主にfloatとセットで使うCSSです。これを使うとfloatの効果をリセットできます。「clear:bothを使ったのにfloatが変になってる!?効いてないの!?」clear:bothが効かない原因と解決方法を解説します。記述ミスなどスペルミスや記号のミス、CSSの優先順位のミスなどケアレスミスの可能性があります。下記記事を参考に見直してみてください。CSSが効かない原因と回避方法【よくあるケアレスミス】CSS効かない、htmlが崩れたときは以下に当てはまらないかチェックしてみてください。合計横幅が100%を超えているから横並びする要素の横幅合計値が親の幅を超えないように再調整しましょう。widthの合計が100%以内の場合、borderとpaddingはwidthに含まれないからbox-sizing:border-boxを指定すると、borderとpaddingをwidthに含めることができます。そもそも崩れやすいfloatを使わず、崩れないdisplay:flexで横並びしましょう。以上、floatが効かない(横並びにならない)原因と解決方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。