WebDesign - Tips und Tricks - IE7-Bugs : clearfix

Ausdehnung einer Box mit ausschließlich floatendem Inhalt

Auch der IE 6 kam Webdesignern schon entgegen und weitete eine Box mit ausschließlich floatendem Inhalt aus, ohne dass ein clearendes Element den Fluss wieder hergestellt hätte: <div class="container"><div>clearfix</div></div> .container { width:40em; border:1px solid red; } .container div { float:left; margin:1em; border:2px solid navy; }

Workaround: nicht erforderlich, aber die „clearfix“-Methode für moderne Browser funktioniert dadurch weiterhin auch im IE 7, obwohl dieser die Pseudoklasse :after noch nicht kennt: .container:after { content:" "; clear:left;display:block; height:0;font-size:0; } *:first-child+html .container { padding-bottom:1em; } * html .container { padding-bottom:1em; }