Bạ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.
Thuộc tính clear có các giá trị sau:
Thuộ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).
Tạo file HTML và CSS có cấu trúc thư mục và nội dung như sau:
Tóm Tắt
Cấu trúc thư mục
-
Html
-
css
Click vào dấu [+] để xem cấu trúc.
HTML viết
<!DOCTYPE html>
<html lang=”vi”>
<head>
<meta charset=”utf-8″ />
<title>Tiêu đề trang web</title>
<link href=”css/style.css” rel=”stylesheet” media=”screen,print” />
</head>
<body>
<div>
<p class=”first”>Thành phần A.</p>
<p class=”second”>Thành phần B.</p>
<p class=”third”>Thành phần C.</p>
</div>
</body>
</html>
Hiển thị trình duyệt khi chưa có CSS
Thà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 <div> và 3 thành phần <p> 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 clear
Thà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.
