【CSS】floatとは?~要素を横並びにする方法~ | MUKKUN QUEST
MUKKUN QUEST     

【CSS】floatとは?~要素を横並びにする方法~

HTML&CSS

【CSS】floatの解説です。読み方は「フロート」です。
通常、縦並びに表示される様々な要素を、横並びに変える方法を知りたい方はこちらで解決します💡

スポンサードサーチ

【CSS】float ~要素を横並びにする方法~

具体的に解説していきます。

【実例】floatは実際にこう使う


上の画像は、HTMLの< li >で表示した3つの項目です。わかりやすいように色をつけています。この項目に対して「float」を使ってみましょう。

「float」で横並びにする時は右並びか、左並びかを選択する必要があります。

float-left(左から並べる)


☝このように打つことで
☟このように並べ替えることができます。

float-right(右から並べる)

☝このように打つことで
☟このように並べ替えることができます。

【特徴】floatの持つ特徴

※随時情報を更新します。

【注意】floatを使う時に起こりやすいミスの事例

●floatをかける対象を間違えやすい。例えば先ほどのリストは<li >に対してfloatをかけたが、もしもその親要素の<ul >にfloatを使うと、今回のような結果にはならない。

floatに似た効果を持つCSS

※随時更新します。