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        </article>
38    </main>
39</body>
40</html>

Float-relaterte CSS-egenskaper

float- og clear-egenskaper 

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

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.
  • I clearfix-klassen er clear-egenskapen satt til both. Bruk av denne klassen forhindrer det neste elementet fra å omgi det flytende elementet. Her forhindrer vi det neste elementet i å flyte etter bildet for å opprettholde layouten.

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 brukergrensesnitt