CSSのfloatを解除(クリア)する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題(というか仕様)と、その対処方法についてネットで調べた情報を一通りまとめました。 1.floatにより親要素の高さが出なくなる(=背景がなくなる)問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
![CSSでfloatを解除する方法のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/1d87cd9396fabb0e83ca27c3e4a1300dd17f6c62/height=288;version=1;width=512/https%3A%2F%2Fwww.koikikukan.com%2Fimages%2F2013%2F03%2F20130328_css_3.png)