floatタグの解除のお話

サイトデザインをする上で知っておくべきであるコーディング技術。

最低でもHTML・CSSは理解できるようにしておかなければなりません。

現在業務前の朝の一時間を使ってHTML・CSSを勉強しています。

今日コーディングをしていて、

なかなか理解できなかった部分がクリアになったのでまとめておきます。

floatタグって？

floatタグは、ある要素の配置を右寄せ・左寄せのように設定するタグです。

ただし、floatを使うと後に続くすべての要素に反映してしまうため、

思った通りのレイアウトになりません。

そこで私もつまずきました・・・ｗ

floatを解除する方法

・clearを利用する

・clearfixを利用する

・overflowを利用する

この3つの方法を私は学びました！

個人的に一番下のoverflowが一番分かりやすいです！

CSSにこんな感じに記載すれば、floatをかけていない要素には何も起こりません！

コーディング難しいけど、できるようになると面白いです！