Computer >> Máy Tính >  >> Lập trình >> CSS

Khi nào và Cách sử dụng CSS Clearfix Hack

Là người lập trình và lập trình viên trong thế hệ CSS Flexbox và CSS Grid, chúng tôi không thường xem xét CSS Clearfix. CSS Flexbox và Grid giải quyết vị trí của các phần tử tốt hơn một chút (và dễ dàng hơn một chút!) So với việc sử dụng float.

Tuy nhiên, tất cả chúng ta vẫn nên lưu ý điều này đối với một số trường hợp chúng ta đang làm việc với mã kế thừa sử dụng float và không có thời gian hoặc tiền bạc để chuyển sang cách xử lý cơ sở mã hiện đại hơn.

Trong bài viết này, chúng ta sẽ khám phá vụ hack clearfix và thảo luận về display:flow-root như một giải pháp thay thế clearfix mới hơn.

Float là gì?

Khi nào và Cách sử dụng CSS Clearfix Hack

Xin nhắc lại, float Về cơ bản thuộc tính lấy phần tử bạn muốn thả nổi và đặt nó ở bên trái hoặc bên phải vùng chứa của nó:

<!DOCTYPE html>
<html lang="en>
<head>
	<title>CSS Clearfix</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
body {
  background-color: grey;
}

ul {
  max-width: 800px;
  width: 100%;
  background: lightblue;
  border: 5px double black;
  padding: 20px;
}

img {
  width: 300px;
  margin: 20px;
}

li {
  list-style: none;
  float: left;
}

</style>
</head>
<body>
<!-- https://unsplash.com/photos/2PPjq7I3bs4 -->
<ul>
  <li>
    <img src="https://images.unsplash.com/photo-1567268377583-d1aaf9ccfc22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" />     </li>
<!--  https://unsplash.com/photos/vYhBeZ_G_xE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1592283338081-beb63fa6a156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1850&q=80" />     </li>
<!--  https://unsplash.com/photos/7UduWMpT618  -->
  <li>
    <img src="https://images.unsplash.com/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3298&q=80" />     </li>
<!--  https://unsplash.com/photos/Ah_QC2v2alE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1552944150-6dd1180e5999?ixlib=rb-1.2.1&auto=format&fit=crop&w=1850&q=80" />     
  </li>
<!--  https://unsplash.com/photos/T-0EW-SEbsE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />     </li>
</ul>
<p>Here is a sample paragraph element. Something is wrong about where I am in the layout. What else is wrong with the layout?</p>
</body>
</html>

Tại thời điểm này, có một số hình ảnh được cho là trong một <ul> , vùng chứa có nền màu xanh lam nhạt, nhưng những hình ảnh đó cao hơn các phần tử khác của <ul> . Điều này dẫn đến hiện tượng tràn không xóa được lề nổi và lề ngang bị thu gọn.

Đây là lý do tại sao vùng chứa màu xanh nhạt quá ngắn, tại sao các phao được đặt ở vị trí của chúng và tại sao chúng ta có một phần tử đoạn cạnh nhau với các phần tử float. Đây là giá trị mặc định khi sử dụng float với các phần tử con cao hơn vùng chứa mẹ.

Cách khắc phục

Giải pháp khả thi đầu tiên là cái được gọi là hack clearfix . Hack này chèn một số nội dung trống sau vùng chứa mẹ để nó mở rộng để bao gồm các phần tử nổi. Chúng tôi sẽ sử dụng phần tử giả ::sau để đạt được điều này:

<!DOCTYPE html>
<html lang="en>
<head>
	<title>CSS Clearfix</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
body {
  background-color: grey;
}

ul {
  max-width: 800px;
  width: 100%;
  background: lightblue;
  border: 5px double black;
  padding: 20px;
}

img {
  width: 300px;
}

li {
  list-style: none;
  float: left;
  margin: 20px;
}

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

</style>
</head>
<body>
<!-- https://unsplash.com/photos/2PPjq7I3bs4 -->
<ul>
  <li>
    <img src="https://images.unsplash.com/photo-1567268377583-d1aaf9ccfc22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" />     </li>
<!--  https://unsplash.com/photos/vYhBeZ_G_xE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1592283338081-beb63fa6a156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1850&q=80" />     </li>
<!--  https://unsplash.com/photos/7UduWMpT618  -->
  <li>
    <img src="https://images.unsplash.com/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3298&q=80" />     </li>
<!--  https://unsplash.com/photos/Ah_QC2v2alE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1552944150-6dd1180e5999?ixlib=rb-1.2.1&auto=format&fit=crop&w=1850&q=80" />     
  </li>
<!--  https://unsplash.com/photos/T-0EW-SEbsE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />     </li>
</ul>
<p>Here is a sample paragraph element. Something is wrong about where I am in the layout. What else is wrong with the layout?</p>
</body>
</html>

Ngoài một chút lề, tôi đã thêm vào <li> để làm cho khoảng cách trở nên tốt hơn, tất cả những gì đã được thêm vào là .clearfix-hack::after bộ chọn. Nó có ba thuộc tính:nội dung, hiển thị và rõ ràng.

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

Một chuỗi trống chiếm giá trị của thuộc tính nội dung, chúng tôi đang di chuyển đường viền của phần tử xuống dưới phần cuối của cả hai các loại float trong thuộc tính clear và chúng tôi đang đặt màn hình của mình thành block hoặc table để trình bày dữ liệu / hình ảnh trên trang.

Điều này dẫn đến việc hiển thị hình ảnh bên trong vùng chứa và thẻ

bên dưới vùng chứa có thể chấp nhận được.

Đây có phải là sự kết thúc cho Clearfix không?

Với sự ra đời của Flexbox và Grid, nhu cầu về clearfix đang dần biến mất. Thậm chí nhiều hơn thế với một cách mới hơn để xử lý clearfix trong CSS:

.clearfix-hack {
	display: flow-root
}

Thay thế .clearfix-hack::after bộ chọn với mã trên. Có gì thay đổi không?

display: flow-root thực hiện hack clearfix cho chúng tôi và làm cho mã của chúng tôi dễ đọc hơn.

Kết luận

Chúng tôi đã thảo luận về hai cách khác nhau để sửa lỗi được tạo ra khi chúng tôi thêm thuộc tính float vào phần tử con:hack clearfix và sử dụng display: flow-root . Nhiều khả năng là bạn sẽ chỉ sử dụng các bản hack này trên mã kế thừa chứ không phải trên bất kỳ mã nào bạn thực sự tạo từ đầu do việc tạo Flexbox và Grid.