Thuộc tính float CSS
Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính float
chỉ định liệu một phần tử có nên nổi sang trái, sang phải hay không.
Lưu ý: Các phần tử được định vị tuyệt đối sẽ bỏ qua thuộc tính float
!
Lưu ý: Các phần tử bên cạnh phần tử nổi sẽ chảy xung quanh nó. Để tránh điều này, hãy sử dụng thuộc tính clear hoặc hack Clearfix (xem ví dụ ở cuối trang này).
Giá trị mặc định: | không có |
---|---|
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: | object .style.cssFloat="left" Hãy thử |
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 | Demo |
---|---|---|
none | The element does not float, (will be displayed just where it occurs in the text). This is default | Demo ❯ |
left | The element floats to the left of its container | Demo ❯ |
right | The element floats the right of its container | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví 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;
}
Hãy tự mình thử »Ví dụ
Để chữ cái đầu tiên của đoạn văn nổi sang 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%;
}
Hãy tự mình thử »Ví dụ
Sử dụng float với danh sách 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%;}
Hãy tự mình thử »Ví dụ
Sử dụng float để tạo trang chủ có header, footer, 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%;}
Hãy tự mình thử »Ví 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;
}
Hãy tự mình thử »Ví dụ
Nếu phần tử nổi cao hơn phần tử chứa nó, nó sẽ tràn ra 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;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: CSS Float
Tham chiếu DOM HTML: thuộc tính cssFloat