Thuộc tính float CSS và thanh toán bù trừ

Làm thế nào để làm việc vớifloattài sản trong CSS và với thanh toán bù trừ

Trôi nổi đã từng là một chủ đề rất quan trọng trong quá khứ.

Nó được sử dụng trong nhiều vụ hack và sử dụng sáng tạo bởi vì nó là một trong số ít cách, cùng với các bảng, chúng ta thực sự có thể triển khai một số bố cục. Trước đây, chúng ta thường thả thanh bên sang trái, ví dụ như để hiển thị nó ở bên trái màn hình và thêm một số lề vào nội dung chính.

May mắn thay, thời thế đã thay đổi và ngày nay chúng ta có Flexbox và Grid để giúp chúng ta bố cục, và float đã quay trở lại phạm vi ban đầu: đặt nội dung ở một bên của phần tử vùng chứa và làm cho các anh chị em của nó hiển thị xung quanh nó.

Cácfloatthuộc tính hỗ trợ 3 giá trị:

  • left
  • right
  • none(mặc định)

Giả sử chúng ta có một hộp chứa một đoạn văn với một số văn bản và đoạn văn đó cũng chứa một hình ảnh.

Đây là một số mã:

<div class="parent">
  <div class="child">
    <div class="box">
      <p>This is some random paragraph and an image. <img src="https://via.placeholder.com/100x100" /> The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text.
      </p>
    </div>
  </div>
</div>
.parent {
  background-color: #af47ff;
  padding: 30px;
  width: 500px;
}

.child { background-color: #ff4797; padding: 30px; }

.box { background-color: #f3ff47; padding: 30px; border: 2px solid #333; border-style: dotted; font-family: courier; text-align: justify; font-size: 1rem; }

và sự xuất hiện trực quan:

Như bạn có thể thấy, quy trình bình thường theo mặc định coi hình ảnh là nội tuyến và tạo khoảng trống cho hình ảnh trong chính dòng.

Nếu chúng tôi thêmfloat: leftvào hình ảnh và một số phần đệm:

img {
  float: left;
  padding: 20px 20px 0px 0px;
}

Đây là kết quả:

và đây là những gì chúng tôi nhận được bằng cách áp dụng float: right, điều chỉnh phần đệm cho phù hợp:

img {
  float: right;
  padding: 20px 0px 20px 20px;
}

Một phần tử nổi sẽ bị xóa khỏi dòng bình thường của trang và nội dung khác sẽ xoay quanh nó.

Xem ví dụ trên Codepen

Bạn cũng không bị giới hạn ở những hình ảnh nổi. Ở đây, chúng tôi chuyển đổi hình ảnh bằngspanthành phần:

<div class="parent">
  <div class="child">
    <div class="box">
      <p>This is some random paragraph and an image. <span>Some text to float</span> The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text.
      </p>
    </div>
  </div>
</div>
span {
  float: right;
  margin: 20px 0px 20px 20px;
  padding: 10px;
  border: 1px solid black
}

Và đây là kết quả:

Thanh toán bù trừ

Điều gì xảy ra khi bạn thả nổi nhiều hơn một phần tử?

Nếu khi được thả nổi, họ tìm thấy một hình ảnh nổi khác, thì theo mặc định, chúng được xếp chồng lên nhau, theo chiều ngang. Cho đến khi không còn chỗ, và chúng sẽ bắt đầu được xếp chồng lên một dòng mới.

Giả sử chúng ta có 3 hình ảnh nội tuyến bên trongpnhãn:

Nếu chúng tôi thêmfloat: leftđến những hình ảnh đó:

img {
  float: left;
  padding: 20px 20px 0px 0px;
}

đây là những gì chúng ta sẽ có:

Nếu bạn thêmclear: leftđối với hình ảnh, chúng sẽ được xếp chồng lên nhau theo chiều dọc chứ không phải theo chiều ngang:

Tôi đã sử dụngleftgiá trị choclear. Nó cho phép

  • leftđể xóa phao bên trái
  • rightđể xóa các phao bên phải
  • bothđể xóa cả phao bên trái và bên phải
  • none(mặc định) tắt xóa

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác: