Bố cục CSS - nổi và rõ ràng
Thuộc tính float CSS chỉ định cách một phần tử sẽ nổi.
Thuộc tính CSS clear chỉ định phần tử nào có thể nổi bên cạnh phần tử đã xóa và ở phía nào.
Thuộc tính phao
Thuộc tính float được sử dụng để định vị và định dạng nội dung, ví dụ: để hình ảnh nổi bên trái văn bản trong vùng chứa.
Thuộc tính float có thể có một trong các giá trị sau:
-
left- Phần tử nổi ở bên trái vùng chứa của nó -
right- Phần tử nổi ở bên phải vùng chứa của nó -
none- Phần tử không nổi (sẽ được hiển thị ngay tại nơi nó xuất hiện trong văn bản). Đây là mặc định -
inherit- Phần tử kế thừa giá trị float của phần tử cha của nó
Trong cách sử dụng đơn giản nhất, thuộc tính float có thể được sử dụng để bao văn bản xung quanh hình ảnh.
Ví dụ - float: đúng;
Ví dụ sau đây chỉ định rằng hình ảnh sẽ nổi sang bên phải trong văn bản:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Ví dụ - float: trái;
Ví dụ sau chỉ định rằng hình ảnh sẽ nổi sang trái trong văn bản:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Ví dụ - Không nổi
Trong ví dụ sau, hình ảnh sẽ được hiển thị ngay tại nơi nó xuất hiện trong văn bản (float: none;):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Ví dụ - Nổi cạnh nhau
Thông thường các phần tử div sẽ được hiển thị chồng lên nhau. Tuy nhiên, nếu chúng ta sử dụng float: left chúng ta có thể để các phần tử nổi cạnh nhau:
Ví dụ
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
} Hãy tự mình thử »