Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] De logica achter floats en clears

Gooly
5 antwoorden
  • Ik ben al een poos op zoek naar (een pagina met) duidelijke uitleg over de logica achter CSS. Met name over floats en clears. Ik werk nu al een jaartje of acht met CSS (8 jaar geleden alleen nog maar om de streepjes onder mijn links vandaan te krijgen ;-)) en inmiddels komen er al hele lappen CSS aan te pas om mijn maaksels vorm te geven. Maar ik vind dat nog teveel dingen bij mij "trial on error" gebeuren en dat komt gewoon door het feit dat ik nog altijd de logica achter sommige dingen niet goed begrijp.

    Het beste voorbeeld hiervan is dus de werking van floats en clears. Lang ging ik er van uit dat floats dienden om een element een bepaalde kant op te sturen en clear om dat juist te voorkomen en een element weer in zijn normale flow te plaatsen. Niks meer en niks minder. Maar er is wel degelijk meer. Want als je een element float, dan float de rest er ineens (wat mij betreft geheel ongevraagd) achteraan. Daarom dien je een volgend element te clearen als je dat niet wilt. Toch lees ik op de meeste plekken dat een clear bedoeld is om te voorkomen dat een ander element tegen één of beide zijden van een element aan float.

    Wat ik vaak doe als ik wil dat element1 float en element2 in de normale context komt te staan, is element1 (inderdaad) laten floaten en element 2 clearen. Maar volgens voorgaande uitleg zou het logischer zijn om element 1 (b.v.) left te laten floaten, en tegelijkertijd ook right te clearen om vervolgens element2 gewoon zijn eigen gang te laten gaan. (Ik geef zo toch aan dat ik niet wil dat er rechts tegen element1 iets aan float?)

    Nou ja, in het kort: aanschouw mijn verwarring. Ik kan de logica achter standaard CSS dus niet altijd begrijpen en ik ben meer van het type: ik kan geen drie woorden achter elkaar onthouden als ik de context mis, maar als ik de werking begrijp kan ik de meest complexe dingen onthouden door ze razendsnel in gedachten te reconstrueren. Ik moet ook toegeven dat ik de stronteigenwijze CSS van Internet Explorer vaak een stuk beter begrijp dan de standaarden (zie box model). Dat betekent echter niet dat ik ze niet verfoei omdat ze het verdommen om zich aan standaarden te houden (maar het wordt gelukkig wel beter en beter)

    Na een paar avonden met mijn grote vriend Google ben ik ongeveer twaalf miljoen pagina's met uitleg over CSS tegen gekomen, maar ik heb er nog geen gevonden die duidelijk de logica er achter uitlegt.

    Kortom: tips gevraagd ;-)
  • Een kleine poging om het uit te leggen:

    Met het gebruik van "goede" HTML ga je uit van de normale [i:9b48ef457d]document flow[/i:9b48ef457d]. Door gebruik van margin en padding zorg je voor de eerste basale positionering. Dan komt het moment dat elementen geplaatst moeten worden op plekken die niet logischerwijs volgen uit de document flow. Je hebt dan keuze uit relatieve en absolute positionering (welke beperkt is tot - en direct verbonden is aan - de eerste parent met expliciete positionering) en float.

    Hier gaat zich vervolgens een apart fenomeen voordoen, namelijk de verschillende gevolgen van positionering en floats voor de document flow. Absolute positionering heeft als resultaat dat het element volledig uit de document flow wordt verwijderd en op zichzelf in de pagina staat, al dan niet over of onder een element (z-index). Relatieve positionering daarentegen blijft onderdeel van de document flow. Floats zitten hier ahw tussenin (met een beetje fantasie, toegegeven). Dmv float trek je het element uit de normale document flow (ofwel: de plek waar het logischerwijs zou komen te staan) en plaats je het op een nieuwe locatie. Echter, deze nieuwe locatie heeft direct betrekking op de document flow! (Dit dus itt absolute positionering.) De nieuwe document flow zal om de float heen gaan. Mocht dit geval niet gewenst zijn, dan kan je met clear de situatie forceren dat er onder het "gefloate" element doorgegaan moet worden, maar meestal is dit een teken van ondoordacht CSS-gebruik. (Meestal, niet altijd!)

    Als je deze gedachtengang aanhoudt moet het doorgaans mogelijk zijn om voorspelbare resultaten te krijgen.

    Hopelijk is dit enigszins duidelijk, maar mocht dat niet zo zijn, geef een gil en ik zal proberen de knelpunten wat extra toe te lichten.

    - Bas
  • Een absoluut duidelijk verhaal. Vooral het stuk dat je met float als het ware de hele document flow een bepaalde kant op stuurt (en dus niet alleen dat ene element) verklaart plotseling veel meer. Ik was idd in de veronderstelling dat je met float een enkel element verplaatste en de rest niet.

    Als je al begint te denken vanuit de standaard documentflow (iets wat ik niet deed) dan wordt het ineens een stuk duidelijker. Ik begrijp nu ook waarom een float: none; op het volgende element niet doet wat ik wilde (en dat je daar een clear voor nodig hebt om dat effect te bereiken) Een float:none; zal dus altijd verder gaan in de normale document flow, die bij de vorige float al is verplaatst.

    het roept wel een paar andere vragen op.
    Waar dient een float:none; dan voor? Als ik niet wil floaten, dan float ik niet en als ik het "op wil heffen" dan gebruik ik een clear.

    En over die clear: als ik het goed begrijp (jou informatie + de informatie die ik al had gecombineerd) en ik wil met een volgend element gewoon onderaan verder gaan, dan zou het niet uit moeten maken of ik b.v. een clear: left; op het nieuwe element zet, of een clear: right; op het floatende element zelf.
    In het eerste geval zeg ik: "Geen floatende elementen links van hier" en in het tweede geval zeg ik: geen floatende elementen rechts van hier". Vanuit het perspectief van beide elementen komt het dan toch op hetzelfde neer?
  • Wat betreft vraag 'waarom float:none':

    Stel je hebt ergens gezet 'img {float:right}', want je wil elk plaatje op de pagina naar rechts floaten.
    Maar stel je hebt één uitzondering op de pagina, namelijk het eerste plaatje, dat je in de normale flow wilt hebben.. Die krijgt helaas ook 'float:right' mee, tenzij…

    Wat betreft de laatste vraag: ik zou zeggen, probeer het eens :wink:
  • Zover als ik begrijp heeft clear alleen zin op een element dat na een gefloat element komt. Dus een gefloat element clear mee geven heeft weinig zin tenzij er voor dat element ook een geflaot element zit en je niet wilt dat het op de zelfde lijn komt…

    Verder is float volgens mij oorspronkelijk bedacht om bv een plaatje binnen tekst te zetten op zo'n manier dat de tekst mooi om het plaatje heen zou lopen imv. dat alleen de eerste regel op de zelfde lijn zou verschijnen.

    Hier de informatie van de W3C erover.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.