Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Áp Dụng Clearfix CSS Cho Website

Áp Dụng Clearfix CSS Cho Website


Ngày 3 Tháng 11 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu clearfix là gì và cách áp dụng nó trong thiết kế và phát triển website nha.

Clear fix Là Gì?

Clearfix là một kỹ thuật CSS giúp bạn giải quyết vấn đề các phần tử bị xếp chồng lên nhau khi xây dụng bố cục bằng thuộc tính float.
Đối với thiết kế web ngày nay thì bạn có thể dụng thuộc tính grid hay flexbox trong CSS để giải quyết vấn đề trên cho website. Bạn chỉ nên sử dụng clearfix vào việc xây đựng website hỗ trợ cho các trình duyệt cũ như IE9 .

Ví Dụ Về Clearfix

Để giúp bạn dễ hình dung hơn thì bây giờ chúng ta sẽ đi vào ví dụ chi tiết về cách áp dụng clearfix trong CSS thông qua đoạn mã dưới đây nha.

HTML

<!--www.niemvuilaptrinh.com-->
<h2>Không Sử Dụng Clearfix</h2>
<div>
  <img class="image1" src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/clearfix-css/logo.png" alt="logo" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
<h2 style="clear:right">Bố Cụ Sử Dụng  Clearfix</h2>
<div class="clearfix">
  <img class="image2" src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/clearfix-css/logo.png" alt="Logo" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

CSS

div {
  border: 3px solid #6495ED;
  padding: 5px;
}
.image1 {
  float: right;
}
.image2 {
  float: right;
}
.clearfix::after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Và kết quả bạn xem hình ảnh dưới đây nha.

Ví Dụ Clearfix css

Còn dưới đây là dự án trên Codepen nha.

See the Pen su dung clearfix css by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn sử dụng clearfix cho các trình duyệt cũ hơn như IE 6 hay 7 trở xuống thì bạn nên sử dụng đoạn code sau nha:

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn kỹ thuật CSS clearfix cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.