CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Thuộc tính float ( left - right - none) trong CSS

Thuộc tính Float trong CSS đóng vai trò rất quan trọng trong việc xây dựng chia bố cục HTML của một trang web. Như các bạn biết, hiện nay người ta sử dụng thẻ div và các thẻ HTML5 như thẻ header, footer, article để chia layout. Nhưng bản chất các thẻ đó lại hiển thị dạng block nên không thể chia ra các khối header, footer, sidebar như giao diện design được. 

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Để giải quyết vấn đề này thì ta sử dụng thuộc tính float trong css. Chúng ta có ba giá trị của float hay sử dụng nhất đó là:

  • 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)

1. Sử dụng float:left và float:right để chia bổ cục

Giả sử mình cần thiết kết một giao diện như sau:

thuoc tinh float trong css left right none 1 png

Thì chúng ta có hai cách xử lý giao diện này:

Bài viết này được đăng tại [free tuts .net]

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.

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í như trong giao diện.

Note: Mình sẽ trình bày cách hai mà không trình bày cách một vì nó quá đơn giản.

Bạn sẽ thực hiện các bước sau:

Bước 1: Tạo thẻ div#container

HTML: Trước tiên chúng ta cần tạo một thẻ div#container như sau:

<body>
    <div id="container">
        ...
    </div>
</body>

CSS: Tất cả các đoạn code bên dưới đều nằm bên trong thẻ div này. Giả sử mình thiết lập chiều dài cho trang trang web là 1000px, font chữ 30px màu trắng và cho nó canh giữa thì lúc này CSS sẽ là:

#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:  XEM DEMO

Giao diện bước này chưa có gì

Bước 2: Xây dựng header

HTML: Header nằm vị trí trên cùng có chiều cao 100pxbackround màu xanh nên ta chỉ việc tạo một thẻ div#header và thiết lập CSS cho nó.

<body>
    <div id="container">
        <div id="header">
            HEADER
        </div>

        ....

    </div>
</body>

CSS: ta chỉ bổ sung hai thuộc tính chiều cao và background màu xanh

#header{
    height: 100px;      /*Cao 100px*/
    background: blue;   /*Nền màu xanh*/
}

Giao diện: XEM DEMO

thuoc tinh float trong css left right none 2 png

Bước 3: Xây dựng Main 

HTML: Phần Main sẽ chứa hai phần đó là Main ContentSidebar, vì vậy ta phải tạo một thẻ div#main để bao quanh hai phần đó lại.

<body>
    <div id="container">
        <div id="header">
            HEADER
        </div>
        <div id="main">
            ....
        </div>
        ....
    </div>
</body>

CSS: Thẻ div này chúng ta không cần CSS bởi vì mục đích của nó là gom hai phần Main ContentSidebar thành một nhóm.

Giao diệnXEM DEMO

Giao diện lúc này vẫn như cũ.

Bước 4: Xây dựng Main Content và Sidebar

Phần Container Content sẽ nằm phía bên trái và Sidebar nằm phía bên phải nên ta phải tạo hai thẻ div rồi sử dụng thuộc tính float:leftfloat:right để xác định vị trí.

HTML:

<div id="main">
    <div class="content">
        MAIN CONTENT
    </div>
    <div class="sidebar">
        SIDEBAR
    </div>
</div>

Bạn để ý mình đặt tên hai class là contentsidebar nhé. 

CSS: Và bây giờ ta chỉ việc viết CSS cho chúng.

.content{
    float:left;     /*Nằm bên trái*/
    width: 700px;   /*Rộng 700px*/
    height: 300px;  /*Cao 300px*/
    background: red;/*Nền màu đỏ*/
}
.sidebar{
    width: 300px;   /*Rộng 300px*/
    float: right;   /*Nằm bên phải*/
    height: 300px;  /*Cao 100px*/
    background: pink;/*Nền màu hồng*/
}

Giao diện: XEM DEMO

thuoc tinh float trong css left right none 4 png

Bước 5: Xây dựng Footer

HTML: Footer tương tự như Header nên khá đơn giản, bạn chỉ cần bổ sung một thẻ div#footer như sau:

<body>
    <div id="container">
        <div id="header">
            HEADER
        </div>
        <div id="main">
            <div class="content">
                MAIN CONTENT
            </div>
            <div class="sidebar">
                SIDEBAR
            </div>
        </div>
        <div id="footer">
            FOOTER
        </div>
    </div>
</body>

CSS: Và viết CSS cho chúng cao 100px và màu nền xám

#footer{
    background: gray;
    height: 100px;
}

Giao diện: Bạn sẽ thấy giao diện không có gì thay đổi so với bước 4. Lý do là Footer nó nối tiếp lề trên bởi thẻ div#main, mà thẻ div#main lại chứa hai thẻ có float:leftfloat:right nên theo mặc định nó sẽ có chiều cao là 0px, nghĩa là thuộc tính float sẽ không được tính vào vùng chiếm không gian của thẻ cha nó. Lúc này footer sẽ bị hai phần Main contentSidebar đè lên trên.

Để giải quyết vấn đề này ta có hai cách xử lý.

  • Cách 1: thêm thuộc tính overflow:hidden cho thẻ div#main (div chứa hai phần left right)
    #main{
        overflow: hidden
    }
  • Cách 2: thêm một thẻ div nằm bên dưới kế tiếp thẻ div.sidebar và thiết lập CSS cho nó là clear:both (xem toàn bộ code tại bước 6)
Bước 6: Kết thúc

Như vậy sau 5 bước bạn đã hoàn thành xong layout trên và đây là đoạn code cuối cùng của chúng ta.

<!DOCTYPE html>
<html>
    <head>
        <title>Chia layout với float - freetuts.net</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #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*/
            }
            #header{
                height: 100px;      /*Cao 100px*/
                background: blue;   /*Nền màu xanh*/
            }
            .content{
                float:left;     /*Nằm bên trái*/
                width: 700px;   /*Rộng 700px*/
                height: 300px;  /*Cao 300px*/
                background: red;/*Nền màu đỏ*/
            }
            .sidebar{
                width: 300px;   /*Rộng 300px*/
                float: right;   /*Nằm bên phải*/
                height: 300px;  /*Cao 100px*/
                background: pink;/*Nền màu hồng*/
            }
            #footer{
                background: gray;
                height: 100px;
            }
            .clear{
                clear:both
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                HEADER
            </div>
            <div id="main">
                <div class="content">
                    MAIN CONTENT
                </div>
                <div class="sidebar">
                    SIDEBAR
                </div>
                <div class="clear"></div>
            </div>
            <div id="footer">
                FOOTER
            </div>
        </div>
    </body>
</html>

XEM DEMO

2. Lời kết

Như vậy ta rút ra được rằng: Trước khi chuyên từ một file PSD sang một file HTML thì bạn nên vạch rõ chia bổ cục trước rồi mới code các phần nhỏ bên trong. Và qua bài này bạn đã biết cách sử dụng thẻ div kết hợp với thuộc tính float:left và float:right trong CSS để chia bổ cục layout. Nếu bạn là người đang học CSS thì đây là chủ đề khá quan trọng đấy nhé.

Cùng chuyên mục:

Tạo Trang web E-commerce  từ HTML & CSS

Tạo Trang web E-commerce từ HTML & CSS

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Top