【CSS】float指定がある要素の親要素に高さをもたせる方法。divなど、要素をfloatさせると親要素の高さが0になってしまうが、これだと都合の悪いことが多々ある。 親要素にも高さをもたせ、次に続く要素達の位置を正しく配置するためには、 floatさせた要素の最後、ようは親コンテナの擬似要素である「:after」に「clear: both;」を適用してやればOK。 具体的には下記の通り。 <div class="container"> .container:after { content: " "; display: block; visibility: hidden; height: 0; clear: both; } contentで空要素を作成し、ブロック要素を指定、高さを0に設定し、visibilityで念のためコンテンツを非表示に設定。これにclear:bothをかけてやることで 親要素の高さも子要素に応じて変動してくれるようになる。
