子要素をfloatにするとブロックが潰れる
ブロック要素の子要素をすべてfloatにすると、潰れます。floatにすると子要素の高さが0になる、とのこと。floatでなくても良い要素をfloat:noneにすることで回避できます。
サンプル:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> <!-- div.parent { border: 1px solid #666666; background-color:#eeeeee; margin: 5px; padding: 5px; } div.child { border: 1px solid #666666; background-color:#ffffff; float:left; } --> </style> </head> <body> <!-- 潰れる --> <div class="parent"> <div class="child"> Aフロート </div> <div class="child"> Bフロート </div> </div> <br/> <!-- 潰れない --> <div class="parent"> <div class="child"> Aフロート </div> <div style="float:none;" class="child"> Bフロート </div> </div> </body> </html>
出力イメージ(IE):
出力イメージ(FireFox):
