Articles
Giới thiệu về CSS
Các thuộc tính CSS liên quan đến float

Các thuộc tính CSS liên quan đến float

Bài viết này giải thích các thuộc tính CSS liên quan đến float.

Bạn có thể học về cách sử dụng và cú pháp của các thuộc tính float và clear.

YouTube Video

HTML để Xem trước

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>

Các thuộc tính CSS liên quan đến float

Các thuộc tính float và 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 là một trong những thuộc tính CSS dùng để căn chỉnh một phần tử về bên trái hoặc bên phải trong phần tử cha của nó, cho phép các phần tử khác bao quanh. Thuộc tính float thường được sử dụng để đặt hình ảnh hoặc các phần tử hộp xung quanh văn bản, nhưng việc sử dụng nó đã giảm do các phương pháp bố cục mới như flex và grid đã trở thành phổ biến.

  • Trong lớp float-left, thuộc tính float được thiết lập là left. Phần tử được áp dụng sẽ nổi ở phía bên trái của phần tử cha, và phần tử tiếp theo sẽ bao quanh bên phải.
  • Lớp float-right thiết lập thuộc tính float là right. Phần tử được áp dụng sẽ nổi về bên phải của phần tử cha, và phần tử tiếp theo sẽ bao quanh về phía bên trái.
  • Trong lớp clearfix, thuộc tính clear được thiết lập là both. Sử dụng lớp này ngăn không cho phần tử tiếp theo bao quanh phần tử đã được float.

Cách sử dụng float

Giá trị
  • left: Căn chỉnh phần tử sang bên trái, cho phép các phần tử khác bao quanh ở bên phải.
  • right: Căn chỉnh phần tử sang bên phải, cho phép các phần tử khác bao quanh ở bên trái.
  • none: Đây là giá trị mặc định và không làm phần tử float.
  • inherit: Kế thừa giá trị thuộc tính float từ phần tử cha.
Thuộc tính clear
  • Khi sử dụng float, phần tử tiếp theo có thể bao quanh phần tử đã được float. Để ngăn điều đó, thuộc tính clear được sử dụng. Các giá trị của thuộc tính clear như sau:.
    • left: Tránh các phần tử được float sang trái.
    • right: Tránh các phần tử nổi sang bên phải.
    • both: Tránh các phần tử nổi sang cả bên trái và bên phải.
    • none: Cho phép các phần tử nổi xung quanh. Đây là giá trị mặc định.

Ghi chú

  • Khi sử dụng float, có thể xảy ra vấn đề là chiều cao của phần tử cha không tính đến chiều cao của phần tử nổi. Để tránh điều này, hãy sử dụng kỹ thuật clearfix hoặc đặt thuộc tính overflow: hidden; cho phần tử cha.
  • Trong thiết kế đáp ứng hoặc các bố cục phức tạp, float có thể khó xử lý hơn so với flex hoặc grid, do đó nên sử dụng flex hoặc grid.
Tóm tắt

float là một kỹ thuật cũ để làm các phần tử nổi sang trái hoặc phải, cho phép văn bản hoặc các phần tử khác bao quanh, và đôi khi vẫn được sử dụng cho các bố cục đơn giản hoặc bao quanh hình ảnh. Tuy nhiên, để tạo ra các bố cục linh hoạt và dễ dàng hơn, nên sử dụng flexbox hoặc grid.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các thuộc tính CSS liên quan đến giao diện người dùngTổng quan về thiết kế đáp ứng trong CSS