2023年04月28日

【本当に横並び?】floatプロパティについて

Lesson10

HTML/CSS

勉強されている方の中には、要素を横並びにする際に「flex」ではなく「float」を使用されている方もいらっしゃるかと思います。

しかし、floatを使用することによって、レイアウトが崩れてしまうことがよくあります。

その理由としては、floatが横並びにするプロパティではなく、要素を浮かせるプロパティだからです!
floatという英単語が浮くという意味ですので、言葉の通りの役割ということになります!

floatを使用するとどうなるのかが分かりやすく解説されている記事を見つけたので、ぜひご覧ください!

使ったことがないという方も、この機会に詳しくなってみてはいかがでしょう?

参考url

https://www.itra.co.jp/webmedia/float-property.html

さかい

コメント(全1件)

1. スマブレ

2023年04月28日

昔は「float」プロパティを使用して、要素を横並びにする手法が使われていました。
何故なら、昔は「flex」プロパティが存在しなかったからです!

本来、floatプロパティは、横並びにするためのプロパティではありません。


現在は、flexという、要素を横並びにするための正式なプロパティが用意されています。
皆さんが「要素を横並びにしたい!」と思った際には、「float」ではなく「flex」を使用するようにしてくださいね!

人気の記事ランキング

【CSSが効かない?!】reset.css読み込み時はご注意を!


【Flexプロパティ一覧】flexに関するプロパティまとめ


【Laravel】use宣言について


【検索の仕方が分からない!】問題解決のための検索方法について


【フォームの種類を決めよう!】inputタグのtype属性について


【質問】制作データの持ち主を問わずリンクを機能させる方法