Float trong CSS
Từ những ví dụ về float: left và float: right ta có thể rút ra kết luận về thuộc tính float như sau: Thành phần nào sử dụng float sẽ được giải phóng vùng không gian, vùng không gian này sẽ trở thành vùng trống, và sẽ bị vùng không gian của những thành phần liền kề nó lập tức chiếm lấy. Khi sử dụng float, các thành phần không chồng chập lên nhau, mà sẽ sắp xếp vị trí tùy thuộc vào chiều rộng của vùng trống. Khi sử dụng float: left, vùng không gian của thành phần sẽ được giải phóng và thành phần sẽ trôi sang trái. Khi sử dụng float: right, vùng không gian của thành phần sẽ được giải phóng và thành phần sẽ trôi sang phải.
Bạn đang xem nội dung tài liệu Float trong CSS, để tải tài liệu về máy bạn click vào nút DOWNLOAD ở trên
Float trong CSS
Thuộc tính float: xác định sự trôi nổi của thành phần.
Nếu chỉ định nghĩa thuộc tính float đơn giản như vậy chắc chắn chúng ta sẽ không thể nào hiểu
được thuộc tính này,vì vậy ta hãy xem trước các giá trị của float để xem thuộc tính float tác động
lên thành phần như thế nào, rồi sau đó sẽ rút ra định nghĩa về float:
float: left
float: right
float: none
Định nghĩa float
Code HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
Tiêu đề trang web
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen,print"
/>
Thành phần A.
Thành phần B.
Hiển thị trình duyệt khi chưa có CSS
CSS
Để dễ hình dung thuộc tính float, ta sẽ cho thành phần và 2 thành phần có nội dung
như sau:
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p.first {
background: #f3f3cf;
height: 100px;
}
p.second {
background: #e0e0fc;
height: 100px;
}
Hiển thị trình duyệt khi chưa sử dụng float
1. float: left
Trước khi định nghĩa về float: left, ta hãy xem ví dụ sau đây:
Ta thêm nội dung float: left cho thành phần A:
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p.first {
background: #f3f3cf;
float: left;
height: 100px;
}
p.second {
background: #e0e0fc;
height: 100px;
}
Hiển thị trình duyệt khi sử dụng float cho thành phần A
Kết quả cho thấy: background của thành phần A hiện chỉ còn phần chứa text và chiều cao của nó,
còn thành phần B đã không còn nằm vị trí ban đầu, để giải thích cho điều này, ta hãy tạm thời xóa
màu background của thành phần A:
Code CSS:
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p.first {
background: #f3f3cf;
float: left;
height: 100px;
}
p.second {
background: #e0e0fc;
height: 100px;
}
Hiển thị trình duyệt khi đã tắt background cho thành phần A
Phân tích:
Nhìn vào kết quả ta thấy màu background và vùng không gian của thành phần B đã chiếm
vùng không gian của thành phần A, kết quả này là do khi sử dụng thuộc tính float, thành
phần nào sử dụng float sẽ được giải phóng vùng không gian ban đầu, khu vực này sẽ trở
thành vùng trống, và sẽ bị vùng không gian của những thành phần khác lập tức chiếm lấy.
Vậy tại sao thành phần B lại không nằm vị trí của thành phần A hay vị trí như ban đầu? ta
hãy tưởng tượng có 2 tấm gỗ trôi trên mặt nước, không cần biết bên dưới mặt nước
chuyển động như thế nào, 2 tấm gỗ vẫn không thể chồng lên nhau, cũng như vậy, thành
phần B không thể nào chồng lên thành phần A được và vị trí của nó sẽ là vị trí của vùng
trống mới ngay bên cạnh thành phần A, khi này thẻ sẽ bao trọn vùng không gian của
thành phần B, đây cũng là một đặc trưng của thuộc tính float.
Ta hãy thêm chiều rộng bằng 100px vào cả 2 thành phần để xem điều gì xảy ra tiếp theo, đồng
thời ta cũng trả lại màu background cho thành phần A:
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p.first {
background: #f3f3cf;
float: left;
height: 100px;
width: 100px;
}
p.second {
background: #e0e0fc;
height: 100px;
width: 100px;
}
Hiển thị trình duyệt khi đã phục hồi background cho thành phần A và sử dụng width: 100px
cho cả 2 thành phần A và B
Điều gì đã xảy ra với thành phần B?, màu background của thành phần B bị mất? và tại sao thành
phần B lại thoát khỏi thẻ div bao ngoài?, để giải thích câu hỏi này, ta lại tạm thời xóa màu
background của thành phần A:
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p.first {
background: #f3f3cf;
float: left;
height: 100px;
width: 100px;
}
p.second {
background: #e0e0fc;
height: 100px;
width: 100px;
}
Trình duyệt hiển thị
Phân tích:
Sau khi vùng không gian của thành phần A được giải phóng, lập tức vùng không gian và vùng hiển
thị của thành phần B chiếm chỗ, tuy nhiên thành phần B không thể nào chồng chập lên thành phần
A (đã giải thích ở trên), và do vùng hiển thị hiện chỉ đủ chứa thành phần A, không đủ chỗ cho
thành phần B nên thành phần B vẫn nằm ở vị trí như lúc đầu, nếu ta tăng chiều rộng sao cho đủ
chỗ để chứa thành phần B thì thành phần B sẽ trôi lên ngang hàng với thành phần A:
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p.first {
background: #f3f3cf;
float: left;
height: 100px;
width: 100px;
}
p.second {
background: #e0e0fc;
height: 100px;
width: 150px;
}
Trình duyệt hiển thị
Ta hãy thử giải phóng vùng không gian của thành phần B bằng cách sử dụng thuộc tính float: left
cho "p.second" đồng thời ta cũng trả lại màu background cho thành phần A:
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p.first {
background: #f3f3cf;
float: left;
height: 100px;
}
p.second {
background: #e0e0fc;
float: left;
height: 150px;
}
Hiển thị trình duyệt khi đã phục hồi background cho thành phần A và sử dụng float: left cho
thành phần B
Ta nhận thấy: do vùng không gian của thành phần A và thành phần B đã được giải phóng, nên
bên trong thẻ đã không còn chứa vùng không gian nào (ngoài vùng không gian của thẻ
) cho nên trình duyệt hiển thị như chúng ta thấy.
Tới đây, bạn đã nắm được phần nào về khái niệm float, tuy vậy chúng ta chưa vội định nghĩa về
float là gì, mà hãy tiếp tục xem thành phần A và thành phần B sẽ thể hiện như thế nào khi sử dụng
thuộc tính float: right
2. float: right
Sử dụng những thuộc tính CSS như trên, tuy nhiên ta sẽ sử dụng float: left cho thành phần A và
float: right cho thành phần B
Code CSS như sau:
* {
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;
}
Trình duyệt hiển thị:
Nhìn vào kết quả ta thấy: vùng không gian của thành phần A và thành phần B đều được giải
phóng, khác kết quả trên, lần này thành phần B trôi về bên phải.
3. float: none
float: none là trả về giá trị float như bình thường, coi như thành phần chưa sử dụng float, thường
được sử dụng để phục hồi giá trị float cho thành phần.
4. Định nghĩa về float
Từ những ví dụ về float: left và float: right ta có thể rút ra kết luận về thuộc tính float như sau:
Thành phần nào sử dụng float sẽ được giải phóng vùng không gian, vùng không gian này
sẽ trở thành vùng trống, và sẽ bị vùng không gian của những thành phần liền kề nó lập tức
chiếm lấy.
Khi sử dụng float, các thành phần không chồng chập lên nhau, mà sẽ sắp xếp vị trí tùy
thuộc vào chiều rộng của vùng trống.
Khi sử dụng float: left, vùng không gian của thành phần sẽ được giải phóng và thành phần
sẽ trôi sang trái.
Khi sử dụng float: right, vùng không gian của thành phần sẽ được giải phóng và thành
phần sẽ trôi sang phải.
Các file đính kèm theo tài liệu này:
float_trong_css_6063.pdf
