Clearfix

Nhanh chóng và dễ dàng xóa nội dung nổi trong vùng chứa bằng cách thêm tiện ích clearfix.

Dễ dàng xóa floats bằng cách thêm .clearfix vào phần tử mẹ . Cũng có thể được sử dụng như một hỗn hợp.

Sử dụng trong HTML:

<div class="clearfix">...</div>

Mã nguồn mixin:

@mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}

Sử dụng mixin trong SCSS:

.element {
  @include clearfix;
}

Ví dụ sau đây cho thấy cách sử dụng tiền tố rõ ràng. Nếu không có clearfix, div bao bọc sẽ không kéo dài xung quanh các nút, điều này sẽ gây ra bố cục bị hỏng.

<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-start">Example Button floated left</button>
  <button type="button" class="btn btn-secondary float-end">Example Button floated right</button>
</div>