Ni kanske har hört talas om clearfix tidigare? Det är sätt att lösa ett vanligt förekommande CSS-problem som uppstår för de flesta som bygger hemsidor mha CSS. Jag hade tänkt reda ut vad detta clearfix löser för problem, det är troligt att ni kanske känner igen det.
Jag kommer att beskriva hur man tidigare löst problemet mha en extra html-tagg, idag använder man CSS istället.
Till att börja med… det är egentligen ett ganska gammalt problem som har en ”rolig” historia bakom sig som jag tar upp här.
Om du vill använda dig av float för att placera olika element, såsom DIVs, kan ett välkänt problem uppstå. Om objektet du väljer att flyta (float) ligger i en annan <div> kommer inte floatens vertikala dimension att påverka DIV-objektet. Detta kan i sin tur medföra att flytobjektet ligger utanför DIV-objektet enligt bilden nedan.
<div><!– Innehåller float (container) –>
<div style=”float:left; width:30%;”><p>Random text i float</p></div>
<p>Text utanför float</p>
<div style=”clear:both;”></div>
</div>
Förklaring
Man löser problemet genom att lägga en DIV-tagg efter den DIV som flyter.
DIV-taggen drar ner botten på ”container” genom att man använder sig av css-koden clear:both. Detta är en lösning som W3 rekommenderat sedan länge, men usch så ful den är. Att lägga till en extra html-snutt för att lösa problemet är inte acceptabelt år 2009.
Med bättre verktyg som CSS kan vi lösa problemet mycket snyggare.
Det finns egentligen flera olika lösningar att välja, det roliga är att det går att lösa såpass enkelt så att det nästan verkar absurt. Man (många många människor) höll på länge och kunde inte riktigt komma underfund med hur man skulle göra det på ett snyggt sätt.
Historien är ganska rolig… En kille som heter Tony Aslett skrev för några år sedan en snutt kod som gjorde att man kunde lösa clearing-problemet via CSS på ett ganska krångligt men smart sätt. Ett tag senare kom en annan kille på ett annat sätt man kunde göra det på (FnE) Float nearly Everything… också ganska klumpigt.
En vacker dag öppnade en kille vid namn Paul O´Brien munnen och sade att: ”Det är väl inte så svårt, det är ju bara att lägga till overflow:auto på den yttre innehållaren”. Det roliga var att en hel designvärld antingen hållit tyst om hur man löser problemet eller att det helt enkelt hade en såpass trivial lösning utan att någon visste om det. Hur sjukt är inte det, designers arbetar och krånglar med html-markup och seriös CSS-hacking för att lösa problemet när allt som egentligen krävs är en rad kod!
Hej,
Vad är den nya lösningen då?
overflow:auto som jag skrev
clear:both; funkar, mindre tecken och fungerar.
Beror såklart på webbläsare. funkar sämre i gamla skräpläsare som tyvärr existerar i allt för stor utsträckning