Thuộc tính clear

Thuộc tính clear hủy bỏ việc bao quanh một phần tử bởi các phần tử khác, được thiết lập bởi thuộc tính float. Có thể nhận các giá trị sau: none (hủy bỏ tác dụng của chính nó), both (hủy bỏ float đồng thời từ bên phải và bên trái), left (hủy bỏ float từ bên trái), right (hủy bỏ float từ bên phải).

Cú pháp

cssbộ chọn {
  clear: none hoặc left hoặc right hoặc both
}

Ví dụ

Hãy hủy bỏ việc văn bản bao quanh hình ảnh từ bên trái:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    văn bản văn bản văn bản văn bản văn bản văn bản
    văn bản văn bản văn bản văn bản văn bản văn bản
    văn bản văn bản văn bản văn bản văn bản văn bản
    văn bản văn bản văn bản văn bản văn bản văn bản
  </p>
</div>

css.image {
  float: left;
  padding-right: 10px;
}
.txt {
  clear: left;
}

Результат:

Ví dụ

Bây giờ hãy hủy bỏ việc văn bản bao quanh hình ảnh từ bên phải:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    văn bản văn bản văn bản văn bản văn bản văn bản
    văn bản văn bản văn bản văn bản văn bản văn bản
    văn bản văn bản văn bản văn bản văn bản văn bản
    văn bản văn bản văn bản văn bản văn bản văn bản
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: right;
}

Результат:

Ví dụ

Hãy hủy bỏ tác dụng của chính thuộc tính clear:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    văn bản văn bản văn bản văn bản văn bản văn bản
    văn bản văn bản văn bản văn bản văn bản văn bản
    văn bản văn bản văn bản văn bản văn bản văn bản
    văn bản văn bản văn bản văn bản văn bản văn bản
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: none;
}

Результат:

Xem thêm