Articles
Introduktion til CSS
Float-relaterede CSS-egenskaber

Float-relaterede CSS-egenskaber

Denne artikel forklarer float-relaterede CSS-egenskaber.

Du kan lære om brugen og syntaksen for float- og clear-egenskaberne.

YouTube Video

HTML til forhåndsvisning

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-relaterede CSS-egenskaber

float- og clear-egenskaber 

 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 er en af CSS-egenskaberne, der bruges til at få et element til at flyde til venstre eller højre inden for dets parent-element, så andre elementer kan placere sig rundt omkring det. float-egenskaben bruges ofte til at placere billeder eller bokselementer omkring tekst, men dens anvendelse er faldet, da nyere layoutmetoder som flex og grid er blevet standard.

  • I float-left-klassen er float-egenskaben sat til left. Det anvendte element flyder til venstre side af parent-elementet, og det næste element placerer sig til højre.
  • Klassen float-right sætter float-egenskaben til right. Det anvendte element flyder til højre side af dets overordnede, og det følgende element ombrydes til venstre.
  • I clearfix-klassen er clear-egenskaben sat til both. Brug af denne klasse forhindrer det næste element i at placere sig rundt omkring det flydende element.

Hvordan man bruger float

Værdier
  • left: Flytter elementet til venstre, så andre elementer kan placere sig til højre.
  • right: Flytter elementet til højre, så andre elementer kan placere sig til venstre.
  • none: Dette er standardværdien og flytter ikke elementet.
  • inherit: Arver værdien for float-egenskaben fra parent-elementet.
clear-egenskaben
  • Når du bruger float, kan det næste element placere sig rundt omkring det flydende element. For at forhindre dette bruges clear-egenskaben. Værdierne for clear er som følger:.
    • left: Undgår elementer, der flyder til venstre.
    • right: Undgår elementer, der flyder til højre.
    • both: Undgår elementer, der flyder til både venstre og højre.
    • ingen: Tillader elementer at flyde rundt. Dette er standardværdien.

Noter

  • Når du bruger float, kan der opstå et problem, hvor forældrelementets højde ignorerer den flydende elements højde. For at undgå dette skal du bruge clearfix-teknikken eller overflow: hidden; på forældrelementet.
  • I responsivt design eller komplekse layout kan float være sværere at håndtere sammenlignet med flex eller grid, så brugen af flex eller grid anbefales.
Sammendrag

float er en gammel teknik til at få elementer til at flyde til venstre eller højre, hvilket tillader tekst eller andre elementer at ombrydes, og det bruges stadig nogle gange til simple layouts eller billedombrydning. Men for at skabe mere fleksible og enklere layouts anbefales flexbox eller grid.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

CSS-egenskaber relateret til brugergrænsefladenOversigt over responsivt design i CSS