07/09/2018, 14:42

Bố cục trong CSS – float và clear

Thuộc tính float xác định phần tử có được trôi nổi. Thuộc tính clear dùng để điều chỉnh các phần tử đang trôi nổi. Thuộc tính float Đơn giản nhất, thuộc tính float có thể được dùng để bao quanh văn bản xung quanh hình ảnh. Ví dụ dưới đây xác định hình ảnh ...

Thuộc tính float xác định phần tử có được trôi nổi.

Thuộc tính clear dùng để điều chỉnh các phần tử đang trôi nổi.

Thuộc tính float

Đơn giản nhất, thuộc tính float có thể được dùng để bao quanh văn bản xung quanh hình ảnh. Ví dụ dưới đây xác định hình ảnh được trôi nổi bên phải 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 để tùy chỉnh các phần tử đang trôi nổi. Thuộc tính này xác định phía của phần tử trôi nổi không được thả trôi.

div {
    clear: left;
}

Clearfix

Nếu một phần tử cao hơn phần tử chứa nó và phần tử này được thả nổi, nó sẽ tràn ra bên ngoài. Bạn có thể thêm overflow: auto; vào phần tử chứa nó để khắc phục vấn đề này.

.clearfix {
    overflow: auto;
}

overflow:auto clearfix hoạt động tốt khi bạn có thể giữ quyền kiểm soát margin và padding (không thì thanh cuộn sẽ xuất hiện). Giải pháp sử dụng clearfix được đánh giá là tiện lợi hơn để bạn thêm vào mã, giúp trang web hiển thị tốt hơn.

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

Ví dụ bố cục trang web

Đây là bố cục phổ biến cho website với thuộc tính float:

.header, .footer {
    background-color: grey;
    color: white;
    padding: 15px;
}

.column {
    float: left;
    padding: 15px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.menu {
    awidth: 25%;
}

.content {
    awidth: 75%;
}

Thuộc tính float trong CSS

Thuộc tính Mô tả
clear Xác định bên cạnh của một phần tử nơi các phần tử nổi không được thả nổi
float Xác định xem một phần tử có nổi hay không
overflow Xác định điều gì xảy ra nếu nội dung tràn hộp của một phần tử
overflow-x Xác định phải làm gì với các cạnh trái / phải của nội dung nếu nó tràn lên vùng nội dung của phần tử
overflow-y Xác định phải làm gì với các cạnh trên cùng / dưới cùng của nội dung nếu nó tràn lên vùng nội dung của phần tử
Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z
0