Thuộc tính float xác định một phần tử trôi nổi hay không.
Thuộc tính clear được sử dụng để kiểm soát hành vi các phần tử
trôi nổi (float).
Thuộc tính float
Đơn giản nhất, thuộc tính float có thể được sử dụng để bao các văn bản xung quanh các hình ảnh.
Ví dụ sau chỉ định một hình ảnh
trôi nổi ở bên phải một văn bản:
img {
float: right;
margin: 0 0 10px 10px;
}
Thuộc tính clear
Thuộc tính clear được sử dụng để kiểm soát hành vi của các phần tử trôi nổi (float).
Các phần tử sau một phần tử
là trôi nổi sẽ vây xung quanh nó. Để tránh điều này, sử dụng thuộc tính clear.
Thuộc tính clear chỉ định các bên của phần tử trôi nổi (float) không được cho phép các phần
tử khác trôi nổi:
div {
clear: left;
}
Clearfix Hack - overflow:auto;
Nếu một phần tử cao hơn phần
tử chứa nó, và nó được thả nổi, nó sẽ tràn ra bên ngoài của phần tử chứa nó.
Do đó chúng ta có thể thêm overflow: auto; đến các phần tử có chứa để khắc phục vấn đề này:
.clearfix {
overflow: auto;
}
Ví dụ về bố cục trang web
Nhìn chung, để làm bố cục cho
toàn bộ trang web người ta sử dụng thuộc tính float:
div {
border: 3px solid blue;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;
}
section {
margin-left: 206px;
border: 3px solid red;
}
Ví dụ khác
Để cho một hình ảnh trôi nổi ở
bên phải trong một đoạn văn bản. Thêm đường viền và margin cho hình ảnh.
Cho một hình ảnh có chú thích
ở trôi nổi bên phải.
Cho chữ cái đầu của một đoạn
văn bản trôi nổi bên trái và định kiểu cho ký tự đó.
Sử dụng float với một danh
sách các liên kết để tạo ra một trình đơn ngang.
Sử dụng float để tạo ra một
trang chủ với một tiêu đề, chân trang, nội dung trái và nội dung chính.
Tất cả các thuộc tính CSS về float
Thuộc tính
|
Mô tả
|
Chỉ định phía (trái, phải) của
một phần tử nơi các phần tử trôi nổi (float) không để xuất hiện ở đó.
|
|
Chỉ định có hay không một
phần tử được trôi nổi.
|
|
Chỉ định những gì sẽ xảy ra
nếu nội dung bị tràn khỏi hộp (box) của phần tử.
|
|
Chỉ định
những gì sẽ thực hiện với các cạnh trái/phải của nội dung nếu nội dung chứa nó của phần tử
|
|
Chỉ định
những gì sẽ thực hiện với các cạnh trên/dưới cùng của nội dung nếu n vùng chứa của phần tử.
|
CodeLean.vn
Facebook: CodeLean Community
Đăng nhận xét