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
bộ 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:
<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>
.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:
<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>
.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:
<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>
.image {
float: right;
padding-right: 10px;
}
.txt {
clear: none;
}
:
Xem thêm
-
thuộc tính
bottom,
thiết lập vị trí của cạnh dưới của phần tử -
thuộc tính
top,
thiết lập vị trí của cạnh trên của phần tử -
thuộc tính
left,
thiết lập vị trí của cạnh trái của phần tử -
thuộc tính
right,
thiết lập vị trí của cạnh phải của phần tử -
phần tử giả
::backdrop,
thiết lập vị trí sau phần tử đầu tiên -
thuộc tính
caption-side,
thiết lập vị trí của tiêu đề bảng
