Clear CSS là gì
clearBạn đã học và nắm rõ thuộc tính float chưa? nếu chưa nắm được thuộc tính float bạn sẽ rất khó hình dung được nội dung bài học này, nếu chưa thì hãy xem lại thuộc tính float trước khi chúng ta bắt đầu. Định nghĩaThuộc tính clear: ngăn chặn thành phần A chiếm vùng không gian của thành phần B (với thành phần B là thành phần sử dụng float). Thuộc tính clear có các giá trị sau:
Chuẩn bịTạo file HTML và CSS có cấu trúc thư mục và nội dung như sau: Cấu trúc thư mục
Click vào dấu [+] để xem cấu trúc. HTML viết
Thành phần A. Thành phần B. Thành phần C. Hiển thị trình duyệt khi chưa có CSSThành phần A. Thành phần B. Thành phần C. CSSĐể dễ hình dung thuộc tính clear, ta sẽ cho thành phần và 3 thành phần
có nội dung như sau, với chỉ mỗi Thành phần A có sử dụng float:
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p.first {
background: #f3f3cf;
float: left;
height: 100px;
}
p.second {
background: #e0e0fc;
height: 100px;
}
p.third {
background: #befcc9;
height: 100px;
}
Hiển thị trình duyệt khi chưa sử dụng clearThành phần A. Thành phần B. Thành phần C. Do Thành phần A có sử dụng float nên nếu còn vùng không gian trống, Thành phần B liền kề nó sẽ lập tức chiếm chỗ, chính vì vậy mà ta có giao diện như trên. Download phần chuẩn bị Tới đây ta đã xong bước chuẩn bị, bắt đầu thôi. clear: left;
Ta thêm nội dung clear: left; cho thành phần B:
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p.first {
background: #f3f3cf;
float: left;
height: 100px;
}
p.second {
background: #e0e0fc;
clear: left;
height: 100px;
}
p.third {
background: #befcc9;
height: 100px;
}
Hiển thị trình duyệt khi sử dụng clear: left cho "Thành phần B"Thành phần A. Thành phần B. Thành phần C. clear: rightCách sử dụng clear: right; tương tự như clear: left;.
Ta thêm nội dung clear: right; cho thành phần B và float: right cho thành phần A:
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p.first {
background: #f3f3cf;
float: right;
height: 100px;
}
p.second {
background: #e0e0fc;
clear: right;
height: 100px;
}
p.third {
background: #befcc9;
height: 100px;
}
Hiển thị trình duyệt khi sử dụng clear: right; cho "Thành phần B"Thành phần A. Thành phần B. Thành phần C. clear: both
Giả sử thành phần A và thành phần B đều sử dụng float:
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p.first {
background: #f3f3cf;
float: left;
height: 100px;
}
p.second {
background: #e0e0fc;
float: right;
height: 100px;
}
p.third {
background: #befcc9;
height: 100px;
}
Hiển thị trình duyệt khi chưa sử dụng clear: both; cho "Thành phần C"Thành phần A. Thành phần B. Thành phần C. Sử dụng clear: both; cho thành phần C ta có:
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p.first {
background: #f3f3cf;
float: left;
height: 100px;
}
p.second {
background: #e0e0fc;
float: right;
height: 100px;
}
p.third {
background: #befcc9;
clear: both;
height: 100px;
}
Hiển thị trình duyệt khi chưa sử dụng clear: both; cho thành phần CThành phần A. Thành phần B. Thành phần C. clear: none
Giả sử thành phần A và thành phần B đều sử dụng float, và thành phần C sử dụng clear: both; ta có:
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p.first {
background: #f3f3cf;
float: left;
height: 100px;
}
p.second {
background: #e0e0fc;
float: right;
height: 100px;
}
p.third {
background: #befcc9;
clear: both;
height: 100px;
}
Hiển thị trình duyệt:Thành phần A. Thành phần B. Thành phần C. Phục hồi clear bằng cách sử dụng thuộc tính clear: none;:
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p.first {
background: #f3f3cf;
float: left;
height: 100px;
}
p.second {
background: #e0e0fc;
float: right;
height: 100px;
}
p.third {
background: #befcc9;
clear: both;
clear: none;
height: 100px;
}
Hiển thị trình duyệt khi sử dụng clear: both; cho thành phần C:Thành phần A. Thành phần B. Thành phần C. float position |