css - What methods of ‘clearfix’ can I use? -

i have age-old problem of div wrapping two-column layout. sidebar floated, container div fails wrap content , sidebar.

<div id="container">   <div id="content"></div>   <div id="sidebar"></div> </div> 

there seem numerous methods of fixing clear bug in firefox:

• <br clear="all"/>
• overflow:auto
• overflow:hidden

in situation, 1 seems work correctly <br clear="all"/> solution, little bit scruffy. overflow:auto gives me nasty scrollbars, , overflow:hidden must surely have side effects. also, ie7 apparently shouldn't suffer problem due incorrect behaviour, in situation it's suffering same firefox.

which method available robust?

depending upon design being produced, each of below clearfix css solutions has own benefits.

the clearfix have useful applications has been used hack. before use clearfix perhaps these modern css solutions can useful:

• css flexbox
• css grid

---

modern clearfix solutions

---

container overflow: auto;

the simplest way clear floated elements using style overflow: auto on containing element. solution works in every modern browsers.

<div style="overflow: auto;">   <img     style="float: right;"     src="path/to/floated-element.png"     width="500"     height="500"   >    <p>your content here…</p> </div> 

one downside, using combinations of margin , padding on external element can cause scrollbars appear can solved placing margin , padding on parent containing element.

using ‘overflow: hidden’ clearfix solution, not have scrollbars, using hidden crop content positioned outside of containing element.

note: floated element img tag in example, html element.

---

clearfix reloaded

thierry koblentz on cssmojo wrote: the latest clearfix reloaded. noted dropping support oldie, solution can simplified 1 css statement. additionally, using display: block (instead of display: table) allows margins collapse when elements clearfix siblings.

.container::after {   content: "";   display: block;   clear: both; } 

this modern version of clearfix.

---

⋮

⋮

older clearfix solutions

the below solutions not necessary modern browsers, may useful targeting older browsers.

note these solutions rely upon browser bugs , therefore should used if none of above solutions work you.

they listed in chronological order.

---

"beat clearfix", clearfix modern browsers

thierry koblentz' of css mojo has pointed out when targeting modern browsers, can drop zoom , ::before property/values , use:

.container::after {     content: "";     display: table;     clear: both; } 

this solution not support ie 6/7 …on purpose!

thierry offers: "a word of caution: if start new project scratch, go it, don’t swap technique 1 have now, because though not support oldie, existing rules prevent collapsing margins."

---

micro clearfix

the recent , globally adopted clearfix solution, micro clearfix nicolas gallagher.

known support: firefox 3.5+, safari 4+, chrome, opera 9+, ie 6+

.container::before, .container::after {   content: "";   display: table; } .container::after {   clear: both; } .container {   zoom: 1; } 

---

overflow property

this basic method preferred usual case, when positioned content not show outside bounds of container.

http://www.quirksmode.org/css/clearing.html - explains how resolve common issues related technique, namely, setting width: 100% on container.

.container {   overflow: hidden;   display: inline-block;   display: block; } 

rather using display property set "haslayout" ie, other properties can used triggering "haslayout" element.

.container {   overflow: hidden;   zoom: 1;   display: block; } 

another way clear floats using overflow property use underscore hack. ie apply values prefixed underscore, other browsers not. zoom property triggers haslayout in ie:

.container {   overflow: hidden;   _overflow: visible; /* ie */   _zoom: 1; /* ie */ } 

while works... not ideal use hacks.

---

pie: easy clearing method

this older "easy clearing" method has advantage of allowing positioned elements hang outside bounds of container, @ expense of more tricky css.

this solution quite old, can learn easy clearing on position everything: http://www.positioniseverything.net/easyclearing.html

---

element using "clear" property

the quick , dirty solution… many drawbacks:

<br style="clear: both" /> <!-- dirty! --> 

drawbacks

• it's not responsive , may not provide desired effect if layout styles change based upon media queries. solution in pure css more ideal.
• it doesn't add semantic value markup.
• it makes code unprofessional.
• in future when need use clearfix solution, won't have go , remove every <br> tag littered around markup.