CSS
Floats

Syntaxis

• duidelijk: geen | links | rechts | beide | inline-start | inline-end;
• zweven: links | rechts | geen | inline-start | inline-end;

Opmerkingen

Een afbeelding in tekst laten zweven

Het meest elementaire gebruik van een float is om tekst om een afbeelding te laten lopen. De onderstaande code produceert twee alinea's en een afbeelding, waarbij de tweede alinea om de afbeelding heen stroomt. Merk op dat het altijd inhoud is na het zwevende element dat rond het zwevende element stroomt.

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>

<img src="http://lorempixel.com/200/100/" />

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>

CSS:

img {
  float:left;
  margin-right:1rem;
}

Dit wordt de uitvoer

Codepen Link

Eenvoudige twee kolomindelingen met vaste breedte

Een eenvoudige lay-out met twee kolommen bestaat uit twee zwevende elementen met vaste breedte. Merk op dat de zijbalk en het inhoudsgebied in dit voorbeeld niet dezelfde hoogte hebben. Dit is een van de lastige onderdelen met lay-outs met meerdere kolommen die drijvers gebruiken, en vereist tijdelijke oplossingen om ervoor te zorgen dat meerdere kolommen dezelfde hoogte hebben.

HTML:

<div class="wrapper">

<div class="sidebar">
  <h2>Sidebar</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
</div>

<div class="content">
  <h1>Content</h1>

  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
</div>

</div>

CSS:

.wrapper {
  width:600px;
  padding:20px;
  background-color:pink;

  /* Floated elements don't use any height. Adding "overflow:hidden;" forces the
     parent element to expand to contain its floated children. */
  overflow:hidden;
}

.sidebar {
  width:150px;
  float:left;
  background-color:blue;
}

.content {
  width:450px;
  float:right;
  background-color:yellow;
}

Eenvoudige drie kolomindelingen met vaste breedte

HTML:

<div class="wrapper">
  <div class="left-sidebar">
    <h1>Left Sidebar</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  </div>
  <div class="content">
    <h1>Content</h1>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p>
  </div>
  <div class="right-sidebar">
    <h1>Right Sidebar</h1>
    <p>Fusce ac turpis quis ligula lacinia aliquet.</p>
  </div>
</div>

CSS:

.wrapper {
  width:600px;
  background-color:pink;
  padding:20px;

  /* Floated elements don't use any height. Adding "overflow:hidden;" forces the
     parent element to expand to contain its floated children. */
  overflow:hidden;
}

.left-sidebar {
  width:150px;
  background-color:blue;
  float:left;
}

.content {
  width:300px;
  background-color:yellow;
  float:left;
}

.right-sidebar {
  width:150px;
  background-color:green;
  float:right;
}

Tweekoloms luie / hebzuchtige lay-out

Deze lay-out gebruikt één zwevende kolom om een lay-out met twee kolommen te maken zonder gedefinieerde breedten. In dit voorbeeld is de linkerzijbalk 'lui', omdat deze slechts zoveel ruimte in beslag neemt als nodig is. Een andere manier om dit te zeggen is dat de linkerzijbalk 'in krimpfolie' zit. De juiste inhoudskolom is 'hebzuchtig', omdat deze alle resterende ruimte in beslag neemt.

HTML:

<div class="sidebar">
<h1>Sidebar</h1>
<img src="http://lorempixel.com/150/200/" />
</div>

<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
</div>

CSS:

.sidebar {
  /* `display:table;` shrink-wraps the column */
  display:table;
  float:left;
  background-color:blue;
}

.content {
  /* `overflow:hidden;` prevents `.content` from flowing under `.sidebar` */
  overflow:hidden;
  background-color:yellow;
}

Viool

eigendom wissen

De duidelijke eigenschap is direct gerelateerd aan drijvers. Eigendomswaarden:

• geen - standaard. Laat zwevende elementen aan beide kanten toe
• links - Geen zwevende elementen toegestaan aan de linkerkant
• rechts - Geen zwevende elementen toegestaan aan de rechterkant
• beide - Geen zwevende elementen toegestaan aan de linker- of rechterkant
• initial - Stelt deze eigenschap in op de standaardwaarde. Lees over de initiaal
• erven - neemt deze eigenschap over van het bovenliggende element. Lees meer over erven

<html>
<head>
<style>
img {
    float: left;
}

p.clear {
    clear: both;
}
</style>
</head>
<body>

<img src="https://static.pexels.com/photos/69372/pexels-photo-69372-medium.jpeg" width="100">
<p>Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum </p>
<p class="clear">Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum </p>

</body>
</html>

Clearfix

De clearfix-hack is een populaire manier om praalwagens te bevatten (N. Gallagher aka @necolas)

Niet te verwarren met de clear eigenschap, clearfix is een concept (dat ook gerelateerd is aan floats, dus de mogelijke verwarring). Om drijvers te bevatten , moet je de klasse .cf of .clearfix toevoegen aan de container ( de bovenliggende ) en deze klasse .clearfix met een paar regels die hieronder worden beschreven.

3 versies met enigszins verschillende effecten (bronnen: een nieuwe micro clearfix-hack van N. Gallagher en clearfix opnieuw geladen door TJ Koblentz):

Clearfix (waarbij de bovenste marge nog steeds aanwezig is met floats)

.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

Clearfix voorkomt ook dat de bovenmarge van ingesloten drijvers instort

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

Clearfix met ondersteuning van verouderde browsers IE6 en IE7

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Codepen met clearfix-effect

Andere bron: alles wat je weet over clearfix is verkeerd (clearfix en BFC - Block Formatting Context terwijl hasLayout betrekking heeft op verouderde browsers IE6 misschien 7)

In-line DIV met float

De div is een blokniveau-element, dat wil zeggen dat deze de hele paginabreedte beslaat en dat de broers en zussen onder elkaar worden geplaatst, ongeacht hun breedte.

<div>
    <p>This is DIV 1</p>
</div>
<div>
    <p>This is DIV 2</p>
</div>

De uitvoer van de volgende code is

We kunnen ze in-line maken door een eigenschap float css toe te voegen aan de div .

HTML:

<div class="outer-div">
    <div class="inner-div1">
        <p>This is DIV 1</p>
    </div>
    <div class="inner-div2">
        <p>This is DIV 2</p>
    </div>
</div>

CSS

.inner-div1 {
    width: 50%;
    margin-right:0px;
    float:left;
    background : #337ab7;
    padding:50px 0px;
}
 
.inner-div2 {
    width: 50%;
    margin-right:0px;
    float:left;
    background : #dd2c00;
    padding:50px 0px;
}
 
p {
    text-align:center;
}

Codepen Link

Gebruik van overloopeigenschap om drijvers te wissen

Als u de overflow instelt op hidden , auto of naar een element scroll , worden alle floats binnen dat element gewist.

Opmerking: met overflow:scroll toont altijd de scrollbox