Bố cục CSS - nổi và rõ ràng
Thuộc tính CSS floatchỉ định cách một phần tử sẽ nổi.
Thuộc tính CSS clearchỉ định những phần tử nào có thể trôi nổi bên cạnh phần tử đã xóa và ở phía nào.
Thuộc tính float
Thuộc floattính được sử dụng để định vị và định dạng nội dung, ví dụ: để một hình ảnh nổi bên trái văn bản trong vùng chứa.
Thuộc floattính 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 trôi 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 floattính có thể được sử dụng để bọc văn bản xung quanh hình ảnh.
Ví dụ - float: right;
Ví dụ sau chỉ định rằng một hình ảnh phải trôi sang bên phải trong một văn bản:
Nỗi đau chính là tình yêu, là hệ thống lưu trữ chính. Phasellus khiếm khuyết, không và đôi khi nó đã được nói, nhưng muốn bị ghét Maecenas là người hâm mộ, báo thù và không nấu ăn, tác giả của cuộc sống đại chúng.
Thí dụ
img {
float: right;
}
Ví dụ - float: left;
Ví dụ sau chỉ định rằng một hình ảnh phải trôi về bên trái trong văn bản:
Nỗi đau chính là tình yêu, là hệ thống lưu trữ chính. Phasellus khiếm khuyết, không và đôi khi nó đã được nói, nhưng muốn bị ghét Maecenas là người hâm mộ, báo thù và không nấu ăn, tác giả của cuộc sống đại chúng.
Thí dụ
img {
float: left;
}
Ví dụ - Không có phao
Trong ví dụ sau, hình ảnh sẽ được hiển thị ngay nơi nó xuất hiện trong văn bản (float: none;):
Nỗi đau chính là tình yêu, là hệ thống lưu trữ chính. Phasellus khiếm khuyết, không và đôi khi nó đã được nói, nhưng muốn bị ghét Maecenas là người hâm mộ, báo thù và không nấu ăn, tác giả của cuộc sống đại chúng.
Thí dụ
img {
float: none;
}
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: leftchúng ta có thể để các phần tử trôi nổi bên cạnh nhau:
Thí dụ
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}