Thuộc tính float trong CSS – Chia cột trong trang web với float

Trong bài học ngày hôm nay chúng ta sẽ được tìm hiểu một kỹ thuật rất quan trọng trong việc xây dựng layout website, đó chính là kỹ thuật chia cột bằng CSS. Một website khi chưa định dạng thì sẽ luôn có một cột duy nhất, nếu bạn muốn làm một website có hai hoặc nhiều cột thì chắc chắn phải dùng đến CSS.

Để xây dựng được bố cục cho website chúng ta sẽ cũng nhau tìm hiểu về thuộc tính float trong CSS. Hiện nay để chia một layout thì chúng ta thường dùng thẻ<div>  và các thẻ HTML5 như <header>, <acticle>, <footer>... Nhưng khi sử dụng các thẻ này không thể hiển thị thành từng cột theo giao diện cần thiết kế được, vì chúng là những thẻ có định dạng block. Vì thế để giải quyết vấn đề này chúng ta sẽ sử dụng thuộc tính float trong CSS.

*Kỹ Thuật Phân Chia Cột với thuộc Tính Float trong css

Thuộc tính float có ba giá trị như sau:

• left: nằm về phía bên trái.
• right: nằm về phía bên phải.
• none: trạng thái bình thường.

Bây giờ mình có một layout như sau, chúng ta sẽ cùng nhau đi thiết kế nó và áp dụng kỹ thuật float để làm.

1. Sử dụng float để chia bố cục cho website

Để xây dựng giao diện ở trên chúng ta sẽ sử dụng thẻ div để chia, và code html như sau:

1 2 3 4 5 6 7

<div class="container">    <div id="header"> HEADER </div>    <div id="left"> LEFT </div>    <div id="main"> MAIN </div>    <div id="right"> RIGHT </div>    <div id="footer"> FOOTER </div> </div>

Trong đó div có id là:

• container là phần tử mẹ, nó sẽ bao bọc toàn bộ giao diện của mình.
• header sẽ là phần chứa nội dung header như hình trên.
• left sẽ là cột bên trái như hình trên.
• main sẽ là cột chính giữa như trên.
• right là cột bên phải của giao diện.
• footer là phần cuối cùng của website như hình.

Các bước để thực hiện tạo giao diện như trên như sau:

1. Các cột phải luôn có một container, tức là phần tử mẹ bao bọc nó.
2. Thiết lập chiều rộng cho container.
3. Thiết lập chiều rộng cho ba cột left, main và right, tổng chiều rộng trong ba cột phải luôn bằng hoặc ít hơn chiều rộng của container.
4. Nên sử dụng box-sizing: border-box  để tính toán kích thước chính xác.
5. Sử dụng thuộc tính float với giá trị left  và right  để đẩy phần tử về sang trái hoặc phải.
6. Tiến hành clear float cho thẻ div có id là footer.

Nào chúng ta cùng nhau đi từng bước để xây dựng giao diện như hình vẽ, code html mẫu như trên nhé  Lưu ý các bạn nên thực hành theo từng bước và chạy ở trình duyệt xem để dễ hiểu hơn nhé.

Bước 1: xây dựng code html

chúng ta đã có code html mẫu như trên, vì thế mình sẽ không trình bày về phần này nữa.

Bước 2: thiết lập chiều rộng cho container

1 2 3 4 5 6

/*== Thiết lập container ==*/ .container {    width: 960px;    border: 1px solid #333;    background: gray; }

Bước 3: Thiết lập chiều rộng  và chiều cao cho #header, #footer và cho ba cột left, main và right

1 2 3 4 5 6 7 8 9 10 11 12 13

/*== #header ==*/ #header {    width: 100%;    height: 100px;    background: blue; } /*== #footer==*/ #footer{    width: 100%;    height: 100px;    background: green; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

/*==cột #left==*/ #left {    width: 200px;    height: 500px;    background: yellow; } /*==cột #main==*/ #main{    width: 560px;    height: 500px;    background: pink; } /*==cột #right==*/ #right {    width: 200px;    height: 500px;    background: purple; }

Sau khi xong bước này giao diện sẽ như sau:

Bước 4: sử dụng box-sizing: border-box

1 2 3 4 5 6 7

/*===Box Sizing==*/ * {   box-sizing: border-box;   -moz-box-sizing: border-box;   -webkit-box-sizing: border-box; }

Bước 5: Sử dụng thuộc tính float để chia cột cho trang web

Bây giờ chúng ta sẽ sử dụng 2 giá trị của thuộc tính float đó là left và right để chia cột như sau.
Chúng ta sẽ thêm thuộc tính float vào các thẻ div có id #left , #main  và  #right như sau:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

/*==cột #left==*/ #left {    width: 200px;    height: 500px;    background: yellow;    float: left; /* dồn về phía bên trái */ } /*==cột #main==*/ #main{    width: 560px;    height: 500px;    background: pink;    float: left; /* dồn về phía bên trái */ } /*==cột #right==*/ #right {    width: 200px;    height: 500px;    background: purple;    float: right; /* dồn về phía bên phải -- Có thể dùng float: left vẫn được*/ }

Sau bước này chúng ta được giao diện như sau:

Đến đây phần footer của chúng ta đâu mất rồi nhỉ? sao chỉ còn hiện chữ footer không vậy? màu sắc đâu rồi :D, chúng ta cùng sang bước tiếp theo để giải quyết vấn đề này nhé ^^

Bước 6: Tiến hành clear float cho footer

Khi chúng ta sử dụng thuộc tính float thì nghĩa là sẽ thiết lập cho một phần tử được đẩy sang trái hoặc phải và cho phép các phần tử gần đó có thể hiển thị bao bọc xung quanh nó. Vì thế thẻ div có #footer không có thuộc tính float nên nó sẽ bị dồn lên trên.

Do vậy khi tiến hành float các phần tử, việc bạn nên làm là phải tạo ra điểm kết thúc cho việc float này, tức là bạn sẽ muốn nó bắt đầu không float ở đâu nữa. Gọi theo thuật ngữ CSS là clear float.

Chúng ta có 2 cách để thực hiện clear float

Cách 1: sử dụng clear: both

Cách này khá là phổ biến, chúng ta có thể tạo thêm một thẻ <div>  ở sau thẻ cuối cùng được sử dụng float và thêm thuộc tính clear: both vào thẻ <div>  đó hoặc có thể thêm vào thẻ <div>  dưới thẻ <div>  được float cuối cùng.

Ở ví dụ này, chúng ta sẽ thêm thuộc tính clear: both vào ngay thẻ <div>  sau thẻ <div>  có id là #right tức là là thẻ div #footer.

1 2 3 4 5 6 7

/*== #footer==*/ #footer{    width: 100%;    height: 100px;    background: green;    clear: both; /* dùng để clear: float */ }

Cách 2: sử dụng overflow

Cách này thì gọn lẹ hơn, không cần sửa HTML mà chỉ cần viết thêm overflow: auto; cho .container  là được. Kết quả y hệt ở trên, Nhưng cách này sẽ không khả dụng được một số trường hợp.

Lúc này giao diện chúng ta đã hoàn tất, kết quả như sau:

Code sau khi hoàn tất:

<div class="container">
 <div id="header"> HEADER </div>
 <div id="left"> LEFT </div>
 <div id="main"> MAIN </div>
 <div id="right"> RIGHT </div>
 <div id="footer"> FOOTER </div>
</div>

Nguồn: Nhatle.net

css HTML July 02, 2018