CSS - Clearfix: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng tìm hiểu về một chủ đề có thể听起来有点 bí ẩn ban đầu: CSS Clearfix. Đừng lo lắng nếu bạn là người mới; tôi sẽ giải thích từng bước, cũng như tôi đã làm cho hàng trăm học sinh trong những năm dạy học của mình. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu bạn thích), và cùng nhau bắt đầu hành trình này nhé!

CSS - Clearfix

Clearfix là gì và tại sao chúng ta cần nó?

Trước khi chúng ta đi vào chi tiết, hãy hiểu rõ Clearfix là gì. Hãy tưởng tượng bạn đang cố gắng dọn một căn phòng bừa bộn. Bạn có những vật cao, thấp và một số vật không muốn ở yên một chỗ. Đó cũng chính là điều xảy ra trong thiết kế web khi chúng ta sử dụng các phần tử浮动 (floated). Chúng có thể gây ra các vấn đề về bố cục, khiến trang web của chúng ta trông như một căn phòng bừa bộn. Clearfix chính là giải pháp làm sạch của chúng ta - nó giúp giữ mọi thứ ngăn nắp và ở đúng vị trí.

CSS Clearfix - Sử dụng thuộc tính overflow và float

Hãy bắt đầu với một trong những kỹ thuật Clearfix phổ biến nhất. Phương pháp này sử dụng cả hai thuộc tính overflow và float.

<div class="clearfix">
<div class="float-left">Tôi đang浮动 bên trái!</div>
<div class="float-right">Tôi đang浮动 bên phải!</div>
</div>

.clearfix::after {
content: "";
display: table;
clear: both;
}

.float-left {
float: left;
}

.float-right {
float: right;
}

Trong ví dụ này, chúng ta sử dụng phần tử giả ::after để tạo một phần tử ẩn sau container của chúng ta. Phần tử ẩn này xóa bỏ cả hai浮动 (left và right), đảm bảo container của chúng ta giãn ra để bao gồm tất cả các phần tử浮动.

Giải thích mã

.clearfix::after: Đây là mục tiêu của phần tử giả được tạo sau container clearfix.
content: "";: Chúng ta thêm nội dung trống để tạo phần tử giả.
display: table;: Điều này tạo ra một cấu trúc như bảng, giúp xóa浮动.
clear: both;: Đây là dòng ma thuật giúp xóa bỏ cả hai浮动 (left và right).

CSS Clearfix - Sử dụng thuộc tính overflow

Một phương pháp khác là sử dụng chỉ thuộc tính overflow. Phương pháp này đơn giản hơn nhưng có một số hạn chế.

<div class="clearfix-overflow">
<div class="float-left">Vẫn浮动 bên trái!</div>
<div class="float-right">Và tôi vẫn ở bên phải!</div>
</div>

.clearfix-overflow {
overflow: auto;
}

.float-left, .float-right {
width: 45%;
}

.float-left {
float: left;
}

.float-right {
float: right;
}

Cách hoạt động

Thuộc tính overflow: auto; tạo ra một "block formatting context". Nó giống như tạo ra một môi trường mới nơi các phần tử浮动 được chứa đầy đủ. Tuy nhiên, hãy cẩn thận - phương pháp này đôi khi có thể tạo ra các thanh cuộn không mong muốn nếu có quá nhiều nội dung.

CSS Clearfix - Sử dụng thuộc tính height

Bây giờ, hãy xem xét một phương pháp có vẻ trực quan nhưng đi kèm với những hạn chế quan trọng.

<div class="clearfix-height">
<div class="float-left">Lại bên trái!</div>
<div class="float-right">Luôn bên phải!</div>
</div>

.clearfix-height {
height: 100px; /* Hoặc bất kỳ chiều cao cố định nào */
}

.float-left, .float-right {
width: 45%;
}

.float-left {
float: left;
}

.float-right {
float: right;
}

Tại sao điều này không lý tưởng

Mặc dù việc đặt chiều cao cố định có thể chứa các phần tử浮动, nó không linh hoạt. Nếu nội dung của bạn tăng lên? Bạn sẽ phải liên tục điều chỉnh chiều cao. Đó như việc mua giày cho một đứa trẻ đang lớn - bạn sẽ luôn phải đuổi theo!

Thuộc tính clear của CSS

Cuối cùng, hãy nói về thuộc tính clear itself. Đây là nền tảng của tất cả các kỹ thuật Clearfix.

<div class="container">
<div class="float-left">Tôi đang浮动 bên trái!</div>
<div class="float-right">Tôi đang浮动 bên phải!</div>
<div class="clear-both"></div>
</div>

.float-left {
float: left;
width: 45%;
}

.float-right {
float: right;
width: 45%;
}

.clear-both {
clear: both;
}

Hiểu thuộc tính clear

Thuộc tính clear có thể có một số giá trị:

left: Xóa浮动 bên trái
right: Xóa浮动 bên phải
both: Xóa cả hai浮动 (left và right)
none: Giá trị mặc định, cho phép浮动 ở cả hai bên

Dưới đây là bảng tóm tắt các giá trị này:

Giá trị	Mô tả
left	Xóa浮动 bên trái
right	Xóa浮动 bên phải
both	Xóa cả hai浮动 (left và right)
none	Mặc định, cho phép浮动 ở cả hai bên

Kết luận

Và thế là bạn đã cùng nhau đi qua thế giới của CSS Clearfix. Nhớ rằng, như nhiều thứ trong phát triển web, không có giải pháp một-size-fits-all. Phương pháp bạn chọn phụ thuộc vào nhu cầu cụ thể của bố cục của bạn.

Như tôi luôn nói với học sinh của mình, cách tốt nhất để thực sự hiểu các khái niệm này là thử nghiệm. Thử mỗi phương pháp, làm rối loạn mọi thứ, sửa chúng và xem chúng hoạt động trong các tình huống khác nhau. Đó là cách bạn sẽ phát triển trực giác cho việc gì hoạt động tốt nhất trong các tình huống khác nhau.

Tiếp tục mã hóa, tiếp tục học hỏi, và đừng quên có vui vẻ trên đường đi. Cuối cùng, phát triển web không chỉ là khoa học mà còn là nghệ thuật. Chúc các bạn thành công trong việc xóa浮动!

Credits: Image by storyset