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読み込み時はご注意を!


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


【表を作成してみよう!】tableタグについて


【Laravel】use宣言について


【表示切り替えができない?】タブ切り替えについて


【構造を理解しよう!】Laravelディレクトリ構造について


【なぜ必要なの?】GUIではなくコマンドが必要な理由


【値をチェックしよう!】値のバリデーションについて


【正しく順番指定!】nth-of-typeとnth-childの使い方について