Articles
Introduktion till CSS
Float-relaterade CSS-egenskaper

Float-relaterade CSS-egenskaper

Den här artikeln förklarar float-relaterade CSS-egenskaper.

Du kan lära dig om användning och syntax för egenskaperna float och clear.

YouTube Video

HTML för förhandsgranskning

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-relaterade CSS-egenskaper

float och 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 är en av de CSS-egenskaper som används för att flyta ett element till vänster eller höger inom dess föräldraelement så att andra element kan omsluta det. float-egenskapen används ofta för att placera bilder eller boxelement runt text, men användningen har minskat eftersom nyare layoutmetoder som flex och grid har blivit mainstream.

  • I klassen float-left är egenskapen float inställd på left. Det applicerade elementet flyter till vänster sida av föräldraelementet, och nästa element omsluter till höger.
  • I klassen clearfix är egenskapen clear inställd på both. Genom att använda denna klass förhindras nästa element från att omsluta det flytande elementet. Här förhindrar vi nästa element från att flyta efter bilden för att bibehålla layouten.

Hur man använder float

Värden
  • left: Flyter elementet till vänster, vilket tillåter andra element att omsluta till höger.
  • right: Flyter elementet till höger, vilket tillåter andra element att omsluta till vänster.
  • none: Detta är standardvärdet och flyter inte elementet.
  • inherit: Ärver värdet för float-egenskapen från föräldraelementet.
clear-egenskap
  • När du använder float kan nästa element omsluta det flytande elementet. För att förhindra detta används clear-egenskapen. Värdena för clear är som följer:.
    • left: Undviker element som är flytande till vänster.
    • right: Undviker element som flyter till höger.
    • both: Undviker element som flyter både till vänster och höger.
    • none: Tillåter element att flyta runt. Det här är standardvärdet.

Anteckningar

  • När float används kan det uppstå ett problem där höjden på det överordnade elementet ignorerar höjden på det flytande elementet. För att undvika detta, använd clearfix-tekniken eller overflow: hidden; på det överordnade elementet.
  • I responsiv design eller komplexa layouter kan float vara svårare att hantera jämfört med flex eller grid, så användning av flex eller grid rekommenderas.
Sammanfattning

float är en gammal teknik för att placera element till vänster eller höger, vilket gör det möjligt för text eller andra element att omge dem. Det används fortfarande ibland för enkla layouter eller bildinramning. För att skapa mer flexibla och enklare layouter rekommenderas dock att använda flexbox eller grid.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

CSS-egenskaper relaterade till användargränssnitt