Bài đăng nổi bật


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

Post a Comment

Mới hơn Cũ hơn