Articles
Wprowadzenie do CSS
Właściwości CSS związane z flotowaniem

Właściwości CSS związane z flotowaniem

Ten artykuł wyjaśnia właściwości CSS związane z flotowaniem.

Możesz dowiedzieć się o zastosowaniach i składni właściwości float i clear.

YouTube Video

HTML do podglądu

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>

Właściwości CSS związane z flotowaniem

Właściwości float i clear 

 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 to jedna z właściwości CSS używana do przesuwania elementu w lewo lub prawo w obrębie elementu nadrzędnego, umożliwiając innym elementom owinięcie się wokół niego. Właściwość float jest często używana do umieszczania obrazów lub elementów pudełkowych wokół tekstu, ale jej użycie zmniejszyło się, ponieważ nowsze metody układu, takie jak flex i grid, stały się powszechne.

  • W klasie float-left właściwość float jest ustawiona na left. Zastosowany element przesuwa się na lewą stronę elementu nadrzędnego, a kolejny element owija się po prawej stronie.
  • Klasa float-right ustawia właściwość float na right. Zastosowany element przepływa na prawą stronę swojego rodzica, a następny element owija się po lewej stronie.
  • W klasie clearfix właściwość clear jest ustawiona na both. Użycie tej klasy zapobiega owijaniu się kolejnego elementu wokół elementu pływającego.

Jak używać float

Wartości
  • left: Przesuwa element w lewo, umożliwiając owinięcie innych elementów po prawej stronie.
  • right: Przesuwa element w prawo, umożliwiając owinięcie innych elementów po lewej stronie.
  • none: Jest to wartość domyślna, która nie powoduje pływania elementu.
  • inherit: Dziedziczy wartość właściwości float z elementu nadrzędnego.
Właściwość clear
  • Podczas używania właściwości float, kolejny element może owijać się wokół elementu pływającego. Aby temu zapobiec, używa się właściwości clear. Wartości dla clear są następujące:.
    • left: Unika elementów przesuniętych w lewo.
    • right: Unika elementów unoszących się po prawej stronie.
    • both: Unika elementów unoszących się zarówno po lewej, jak i po prawej stronie.
    • brak: Pozwala elementom unosić się wokół. To jest domyślna wartość.

Notatki

  • Podczas korzystania z float może pojawić się problem, w którym wysokość elementu nadrzędnego ignoruje wysokość unoszonego elementu. Aby tego uniknąć, użyj techniki clearfix lub overflow: hidden; w elemencie nadrzędnym.
  • W projektowaniu responsywnym lub przy złożonych układach float może być trudniejszy w obsłudze w porównaniu do flex lub grid, więc zalecane jest użycie flex lub grid.
Podsumowanie

float to stara technika do unoszenia elementów w lewo lub w prawo, umożliwiająca otaczanie ich tekstem lub innymi elementami, i nadal jest czasami używana do prostych układów lub zawijania obrazów. Jednak do tworzenia bardziej elastycznych i łatwiejszych układów zaleca się użycie flexbox lub grid.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Właściwości CSS związane z interfejsem użytkownikaPrzegląd projektowania responsywnego w CSS