Articles
Introduksjon til CSS
Float-relaterte CSS-egenskaper

Float-relaterte CSS-egenskaper

Denne artikkelen forklarer float-relaterte CSS-egenskaper.

Du kan lære om bruken og syntaksen til float- og clear-egenskapene.

YouTube Video

HTML for 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-relaterte CSS-egenskaper

float- og clear-egenskaper 

 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 av CSS-egenskapene som brukes til å flytte et element til venstre eller høyre innenfor dets foreldreelement, slik at andre elementer kan omgi det. float-egenskapen brukes ofte til å plassere bilder eller bokselementer rundt tekst, men bruken har avtatt ettersom nyere layoutmetoder som flex og grid har blitt mer vanlige.

  • I float-left-klassen er float-egenskapen satt til left. Det anvendte elementet flyter til venstre side av foreldreelementet, og det neste elementet omgir det på høyre side.
  • Klassen float-right setter float-egenskapen til right. Elementet flyter til høyre side av sin overordnede, og det følgende elementet ombrytes til venstre.
  • I clearfix-klassen er clear-egenskapen satt til both. Bruk av denne klassen forhindrer det neste elementet fra å omgi det flytende elementet.

Hvordan bruke float

Verdier
  • left: Flytter elementet til venstre, slik at andre elementer kan omslutte det på høyre side.
  • right: Flytter elementet til høyre, slik at andre elementer kan omslutte det på venstre side.
  • none: Dette er standardverdien og flytter ikke elementet.
  • inherit: Arver verdien for float-egenskapen fra foreldreelementet.
clear-egenskap
  • Når du bruker float, kan det neste elementet omslutte det flytende elementet. For å forhindre dette, brukes clear-egenskapen. Verdiene for clear-egenskapen er som følger:.
    • left: Unngår elementer som er flyttet til venstre.
    • right: Unngår elementer som er flytende til høyre.
    • both: Unngår elementer som er flytende til både venstre og høyre.
    • none: Tillater elementer å flyte rundt. Dette er standardverdien.

Notater

  • Når du bruker float, kan det oppstå et problem hvor høyden til overordnede element ignorerer høyden til de flytende elementene. For å unngå dette, bruk clearfix-teknikken eller overflow: hidden; på det overordnede elementet.
  • I responsivt design eller komplekse oppsett kan float være vanskeligere å håndtere sammenlignet med flex eller grid, så bruk av flex eller grid anbefales.
Sammendrag

float er en gammel teknikk for å flyte elementer til venstre eller høyre, som lar tekst eller andre elementer omgi dem, og den brukes fortsatt noen ganger for enkle oppsett eller bildeinnpakning. For å lage mer fleksible og enklere oppsett anbefales derimot flexbox eller grid.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

CSS-egenskaper relatert til brukergrensesnittOversikt over responsiv design i CSS