CSS 「float」で指定した要素の幅サイズが揃わない
「float」は「float」で指定した要素の内部の要素を均等な幅サイズで表示するという、レスポンシブコーディングには欠かせないプロパティです。
「float」を使用してコーディングした以下の画像をご覧ください。
とても微妙なのですが、高さが揃っていないのがお分かりになると思います。
全て同じサイズの画像を入れていますので、高さが揃っていないということは、幅が微妙に異なるために高さに影響してしまっていると考えられます。
画像提供：ワインブティックヴァンヴァン様
文章を入れると画像がガタガタする
試しに画像だけで更新してみると、キレイに４等分サイズで揃っていました。
文字を入れるとガタガタしてしまうようです。
先の画像をよーく見ると、サイズの大きな画像は文字が端まで行っており、小さい画像は文字が端まで行かずに改行しています。
これが影響しているのでは？と考えました。
CSSで文章の改行位置を揃える（禁則処理）を行う
バラバラとしてしまう改行のおしりを全てカチッと揃えるCSSを振る事で解消される事があります。
※ブラウザの仕様によります
p {
text-align: justify;
text-justify: inter-ideograph;
}
これで解決できる！と思ったのですが、このCSSは「ひとつのブロック内の改行位置を揃える」という指示で「複数のブロック内の改行位置を全て同じように揃える」というものではありませんので、無意味である事にきがつきました。
改行ルールが優先されて幅が広くなってしまう場合も
上記のCSSを入れない場合は、「float」の等分ルールより、文字の改行ルールが優先されます。
文字の改行ルールとは、例えば「ショッキング」「スーパーマン」という単語について
シ ョッキング
ショ ッキング
スーパ ーマン
という小文字や伸ばし棒を文の頭に来るような改行にはしないという決まりです。
小文字や伸ばし棒が多い単語があった場合、それが影響して改行ができず、横に広い幅が必要になってしまい、他の要素を圧迫してひとつだけ幅広くなってしまう事があります。
上記の改行位置を揃える記述を入れれば解消されますが、おかしなところで改行されてしまうのは問題があります。
小文字や伸ばし棒の多い単語がある時には、適宜手動で区切りの良い場所に改行を入れる事をおすすめいたします。
まとめ
「float」は便利なプロパティですが、文字の改行位置などテキスト要素に影響されてしまう事があります。
CSSで改行位置を揃える方法は意味がありませんので、手動で改行を揃えるか、気になるようでしたら幅を指定する他なさそうです。しかし幅を指定してしまったら「float」の良さが消えてしまいますので考えどころです。
