Float thường được sử dụng để căn chỉnh hình ảnh, nhưng nó cũng được sử dụng nhiều trong thiết kế giao diện (layout). Sau đây là cách sử dụng Float và Clear
Các giá trị của Float
+ Left: Cố định phần tử về bên trái.
+ Right: Cố định phần tử về bên phải.
+ None: Không thay đổi . (Khi không được khai báo thì giá trị float bằng none).
Ví dụ: Sử dụng Float như sau:
– Trong file: bai1html.html ta gõ như sau:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<body>
<div id=“wapper”>
<div id=“left”>
<img src=“imager/logo.jpg” />
<p>Cột thứ nhất có độ rộng 200px và được float: left</p>
</div>
<div id=“right”>
<p>Ở ví dụ này tôi có một thành phần mẹ (div) có chiều rộng 400px. Trong đó tôi có một thành phần div có có độ rộng 200px và được float: left, một thành phần div có có độ rộng 200px và được float: right.</p>
</div>
</div>
</body>
|
– Trong file: style.css ta định dạng như sau:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#wapper{
width: 500px;
border: 1px solid blue;
}
#left{
float: left; width: 200px
}
#right{
float: right; width: 200px
}
|
– Kết quả:
Cách sử dụng Float Clear trong CSS
Clear: Clear luôn đi cùng với float. Có thể coi clear là ngược lại của float. Khi float thì các thành phần bên dưới di chuyển nên trên để lấp đầy khoảng trống. Nhưng không phải lúc nào chúng ta cũng muốn như vậy, do đó ta sử dụng clear để ngăn không cho các thành phần phía dưới tràn lên trên. Bạn cứ hình dung rằng khi một thành phần nào đó được gán thuộc tính clear thì nó sẽ giống như một bức tường ngăn các thành phần bên dưới di chuyển lên trên.
Các giá trị của Clear:
Clear có 4 giá trị sau: left, right, both và none.
– Trong file: bai1html.html ta gõ như sau:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<body>
<div id=“left”>
<img src=“imager/logo.jpg” />
<p>Đoạn văn bản thứ nhất được float:left</p>
<div class=“clear”></div> <!— Thẻ div trống được thêm vào —>
<img src=“imager/logo.jpg” />
<p>Đoạn văn bản thứ 2 được float:left</p>
</div>
</body>
|
– Trong file: style.css ta định dạng như sau:
|
1
2
3
4
5
|
.clear{
clear: both;
}
|
– Kết quả:
Cách sử dụng Float Clear trong CSS 2