Bài 10: Thuộc tính float trong CSS

Thuộc tính float trong CSS có 3 loại (3 vị trí):

  • left: Nằm phía bên trái
  • right: Nằm phía bên phải
  • none: Nằm tại chính vị trí của nó (trạng thái bình thường)

Chia bổ cục có 2 cách:

  • Cách 1: Sử dụng table để chia thành cách vị trí. Cách này quá thông thường và đã tụt hậu nên mình không làm. (Không khuyến khích)
  • Cách 2: Sử dụng thẻ div (hoặc các thẻ header, footer trong HTML5) kết hợp với float:left – float:right để chia thành các vị trí. (Khuyên dùng)

1. Cách 1: Sử dụng table

Để sử dụng table chia cột, định dạng trang, ta viết như sau: 

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Trong đó:

  • table là bảng
  • tr là dòng
  • td là cột

Ghi chú: Nếu muốn thêm 1 dòng, thì thêm 1 thuộc tính tr

2. Cách 2: Dùng thẻ div định dạng trên 2 cột

Sau đây mình ví dụ là dùng thẻ div với id là container, nếu bạn không thích dùng ID thì có thể dùng CLASS, thay id=”container” bằng class=”container” là được. 

<body>
    <div id="container">
        ...
    </div>
</body>
Và chúng ta viết CSS cho nó: 
#container{
    width: 1000px;      /*Rộng 1000px*/
    margin: 0px auto;   /*Canh giữa màn hình*/
    text-align: center; /*Text bên trong canh giữa*/
    font-size: 30px;    /*Font chữ 30px*/
    color: #FFF;        /*Font màu trắng*/
}
Giao diện bước này chưa có gì, để có nội dung, ta nên định dạng layout theo cách khác nhau, ví dụ dưới đây mình sẽ phân ra thành 3 cột. 
<body>
    <div id="container">
        <div id="row1">
            Nội dung cột 1
        </div>
         <div id="row2">
            Nội dung cột 2
        </div>
        <div id="row3">
            Nội dung cột 3
        </div>
    </div>
</body>
Thì CSS ta có thể viết như sau: 
#container{
    width: 1000px;      /*Rộng 1000px*/
    margin: 0px auto;   /*Canh giữa màn hình*/
    text-align: center; /*Text bên trong canh giữa*/
    font-size: 30px;    /*Font chữ 30px*/
    color: #FFF;        /*Font màu trắng*/
}
#container > row1{
    width: 33%;
    background: red;
    height: 200px;
    float: left;
}
#container > row2{
    width: 33%;
    background: green;
    height: 200px;
    float: left;
}
#container > row3{
    width: 33%;
    background: blue;
    height: 200px;
    float: left;
}