Thuộc tính float CSS
Thí dụ
Để một hình ảnh trôi sang bên phải:
img
{
float: right;
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc float
tính chỉ định liệu một phần tử có nên trôi sang trái, phải hay không.
Lưu ý: Các phần tử được định vị tuyệt đối bỏ qua thuộc float
tính!
Lưu ý: Các phần tử bên cạnh phần tử nổi sẽ chảy xung quanh phần tử đó. Để tránh điều này, hãy sử dụng thuộc tính rõ ràng hoặc hack clearfix (xem ví dụ ở cuối trang này).
Giá trị mặc định: | không ai |
---|---|
Thừa hưởng: | không |
Hoạt hình: | không. Đọc về hoạt hình |
Phiên bản: | CSS1 |
Cú pháp JavaScript: | đối tượng .style.cssFloat = "left" |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Cú pháp CSS
float: none|left|right|initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
none | The element does not float, (will be displayed just where it occurs in the text). This is default | |
left | The element floats to the left of its container | |
right | The element floats the right of its container | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Các ví dụ khác
Thí dụ
Để một hình ảnh trôi sang bên trái:
img
{
float: left;
}
Thí dụ
Để hình ảnh được hiển thị ngay tại nơi nó xuất hiện trong văn bản (float: none):
img
{
float: none;
}
Thí dụ
Để chữ cái đầu tiên của đoạn văn trôi sang bên trái và tạo kiểu cho chữ cái:
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
Thí dụ
Sử dụng float với danh sách các siêu liên kết để tạo menu ngang:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Thí dụ
Sử dụng float để tạo trang chủ với đầu trang, chân trang, nội dung bên trái và nội dung chính:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Thí dụ
Không cho phép các phần tử nổi ở bên trái hoặc bên phải của phần tử <p> được chỉ định:
img {
float: left;
}
p.clear {
clear: both;
}
Thí dụ
Nếu một phần tử nổi cao hơn phần tử chứa, nó sẽ tràn ra bên ngoài vùng chứa của nó. Có thể khắc phục điều này bằng "hack clearfix":
.clearfix::after {
content: "";
clear: both;
display: table;
}
Các trang liên quan
Hướng dẫn CSS: CSS Float
Tham chiếu DOM HTML: thuộc tính cssFloat