CSSでfloatした要素の高さを揃える方法をご紹介！

floatプロパティを使用する事で要素を横並びにする事ができます。

しかし下記のサンプルコードのように横並びした際、高さが揃わずに困る事があると思います。

この記事ではCSSでfloatした要素の高さを揃える方法を解説いたします。

floatした要素の高さを揃える方法は、要素を下に伸ばし要素のはみ出している部分を見えなくする必要があります。

詳しい説明を次章で紹介いたします。

padding-bottom: 200px;とmargin-bottom: -200px;をCSSで要素を下に伸ばし#containerより要素を下に広げます。

※padding-bottom: 200px;とmargin-bottom: -200px;ではなくても#containerより要素が下に広がれば良いので数値は何にでも大丈夫です。

下記のサンプルコード#container（ピンク内）より要素を下にしています。

overflow: hidden;とは指定をすると、要素のはみ出している部分を見えなくするプロパティです。

下記のサンプルコードのように指定すると#containerの部分まで見えないようにしてくれるので高さを変更したい際は#containerのheight: 150px;を変更して下さい。