Articles
Introductie tot CSS
Float-gerelateerde CSS-eigenschappen

Float-gerelateerde CSS-eigenschappen

Dit artikel legt float-gerelateerde CSS-eigenschappen uit.

Je kunt leren over het gebruik en de syntax van de eigenschappen float en clear.

YouTube Video

HTML voor Voorbeeldweergave

css-float.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-float.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Layout</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>float</h3>
23            <section style="height: auto; color: black;">
24                <header><h4>float: left</h4></header>
25                <section class="sample-view">
26                    <div class="float-left">float left</div>
27                    <div class="content">
28                        <p>
29                            paragraph 1-1
30                            paragraph 1-2
31                        </p>
32                        <p>paragraph 2</p>
33                    </div>
34                    <div class="clearfix"></div>
35                </section>
36            </section>
37            <section style="height: auto; color: black;">
38                <header><h4>float: right</h4></header>
39                <section class="sample-view">
40                    <div class="float-right">float right</div>
41                    <div class="content">
42                        <p>
43                            paragraph 1-1
44                            paragraph 1-2
45                        </p>
46                        <p>paragraph 2</p>
47                    </div>
48                    <div class="clearfix"></div>
49                </section>
50            </section>
51        </article>
52    </main>
53</body>
54</html>

Float-gerelateerde CSS-eigenschappen

float- en clear-eigenschappen 

 1.content {
 2    width: 300px;
 3    height: 100px;
 4}
 5
 6.content p {
 7    background-color: lightblue;
 8    margin: 10px;
 9}
10
11.float-left {
12    float: left;
13    width: 150px;
14    margin-right: 20px;
15    background-color: lightblue;
16}
17
18.float-right {
19    float: right;
20    width: 150px;
21    margin-right: 20px;
22    background-color: lightblue;
23}
24
25.clearfix {
26    clear: both;
27    display: none;
28}

float is een van de CSS-eigenschappen die wordt gebruikt om een element naar links of rechts te laten floaten binnen zijn ouder-element, zodat andere elementen eromheen kunnen bewegen. De eigenschap float wordt vaak gebruikt om afbeeldingen of box-elementen rondom tekst te plaatsen, maar het gebruik ervan is afgenomen doordat nieuwere lay-outmethoden zoals flex en grid gebruikelijk zijn geworden.

  • In de klasse float-left is de eigenschap float ingesteld op left. Het toegepaste element float naar de linkerkant van het ouder-element, en het volgende element beweegt naar rechts.
  • De klasse float-right stelt de eigenschap float in op right. Het toegepaste element zweeft naar de rechterkant van zijn ouder, en het volgende element omvloeit aan de linkerkant.
  • In de klasse clearfix is de eigenschap clear ingesteld op both. Door deze klasse te gebruiken, wordt voorkomen dat het volgende element rond het gefloate element beweegt.

Hoe float te gebruiken

Waarden
  • left: Laat het element naar links floaten, zodat andere elementen zich aan de rechterkant kunnen bewegen.
  • right: Laat het element naar rechts floaten, zodat andere elementen zich aan de linkerkant kunnen bewegen.
  • none: Dit is de standaardwaarde en laat het element niet floaten.
  • inherit: Erft de waarde van de eigenschap float van het ouder-element.
Eigenschap clear
  • Bij gebruik van float kan het volgende element rondom het gefloate element bewegen. Om dit te voorkomen, wordt de eigenschap clear gebruikt. De waarden voor clear zijn als volgt:.
    • left: Vermijdt elementen die naar links gefloat zijn.
    • right: Vermijdt elementen die naar rechts zweven.
    • both: Vermijdt elementen die zowel naar links als naar rechts zweven.
    • geen: Hiermee kunnen elementen vrij rond zweven. Dit is de standaardwaarde.

Notities

  • Bij gebruik van float kan er een probleem zijn waarbij de hoogte van het bovenliggende element de hoogte van het zwevende element negeert. Om dit te vermijden, gebruik de clearfix-techniek of overflow: hidden; op het bovenliggende element.
  • In responsive design of complexe lay-outs kan float moeilijker te hanteren zijn in vergelijking met flex of grid, daarom wordt het gebruik van flex of grid aanbevolen.
Samenvatting

float is een oude techniek om elementen naar links of rechts te laten zweven, waardoor tekst of andere elementen eromheen kunnen vloeien, en het wordt soms nog steeds gebruikt voor eenvoudige lay-outs of het omringen van afbeeldingen. Voor het creëren van flexibelere en eenvoudigere lay-outs wordt echter flexbox of grid aanbevolen.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

CSS-eigenschappen gerelateerd aan gebruikersinterfaceOverzicht van responsief ontwerp in CSS