Chủ đề nổi bật

Bài 08: 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 ...

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. 

Để 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:

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

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{
    awidth: 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 100px và backround 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

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ện: XEM 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:left và float: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à content và sidebar 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*/
    awidth: 700px;   /*Rộng 700px*/
    height: 300px;  /*Cao 300px*/
    background: red;/*Nền màu đỏ*/
}
.sidebar{
    awidth: 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

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:left và float: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 - code24h.com</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #container{
                awidth: 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*/
                awidth: 700px;   /*Rộng 700px*/
                height: 300px;  /*Cao 300px*/
                background: red;/*Nền màu đỏ*/
            }
            .sidebar{
                awidth: 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é.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan
Mới nhất

jQuery

Hàm jQuery Ví dụ Mô tả BỘ CHỌN (SELECTORS) $('*') $('*') Chọn tất cả các thành phần có trong văn bản HTML, khi sử dụng bộ chọn này có thể sẽ khiến quá trình xử lý của một số trình duyệt chậm lại. $(' tag ') $('div') Chọn thành phần theo từng tag cụ thể. $('tag. ...

Tag HTML5

Tag mới trong HTML5 Tag Mô tả Trạng thái <article> Định nghĩa một bài viết, một nội dung riêng biệt. <aside> Định nghĩa nội dung bên ngoài nội dung chính (thường là phần sidebar). <audio> Định nghĩa âm thanh, như nhạc hay trường audio khác.. ...

Tag HTML/XHTML

Tag HTML/XHTML DTD cho biết: thuộc tính HTML 4.01 / XHTML 1.0 DTD nào được cho phép. T=Transitional, S=Strict, và F=Frameset. Tag Mô tả HTML 4.01 XHTML 1.0 XHTML 1.1 Xác định một comment, một chú thích. TSF O <!DOCTYPE> Xác định mẫu cho văn bản HTML. TSF ...

Animation trong CSS

Animation là gì ? Animation (hay còn gọi là hiệu ứng) là tiến trình thay đổi hình dạng và tạo hiệu ứng di chuyển của các phần tử. CSS hỗ trợ rất nhiều hiệu ứng liên quan tới sự kiện chuyển động. Bảng dưới liệt kê tất cả các hiệu ứng bạn có thể sử dụng trong CSS. Để tìm hiểu chi tiết, ...

Chuyển đổi từ PX sang EM trong CSS

Chuyển đổi từ PX sang EM Như đã được trình bày trong chương Đơn vị trong CSS , một đơn vị được sử dụng cho chiều cao của font. Một đơn vị em tương đương với kích cỡ của một font đã cho, nếu bạn gán kích cỡ của font là 12px thì mỗi đơn vị em sẽ là 12px, do đó 2em sẽ là 24px. Do đó, trong ...

Web Safe Font trong CSS

Tổ hợp Font trong CSS CSS3 tương thích với công nghệ tổ hợp Font. Tức là, nếu trình duyệt không hỗ trợ Font đầu tiên, thì nó sẽ cố gắng thử các Font tiếp theo. Serif Font trong CSS Font family Normal bold Georgia, serif Cau van nay duoi dang Normal Text. Cau van nay ...

User Interface trong CSS | Giao diện người dùng trong CSS

Thuộc tính user interface trong CSS cho phép bạn thay đổi bất kỳ phần tử nào vào một trong các phần tử user interface chuẩn. Bảng dưới liệt kê một số thuộc tính thường được sử dụng trong User Interface trong CSS3: Giá trị Miêu tả appearance Cho phép người dùng làm cho các phần tử ...

Chia cột trong CSS

CSS3 hỗ trợ tính năng Multi Column giúp bạn sắp xếp văn bản dưới dạng cấu trúc một bài báo. Bảng dưới liệt kê một số thuộc tính Multi Column thường được sử dụng trong CSS3: Giá trị Miêu tả column-count Được sử dụng để đếm số cột mà phần tử nên được phân chia thành column-fill ...

Tổng hợp các màu trong CSS

Bảng dưới đây liệt kê 16 tên cùng mã màu (mã Hex code) đã được giới thiệu trong HTML 3.2. Bạn cũng có thể sử dụng các màu này trong CSS. Tên màu Giá trị Hex Code Màu aqua #00ffff black #000000 blue #0000ff fuchsia #ff00ff green #008000 ...

Responsive trong CSS | Responsive CSS là gì

Responsive CSS là gì ? Responsive là một tính từ để chỉ một website có thể hiển thị tương thích trên mọi kích thước hiển thị của trình duyệt. Ví dụ: nếu giao diện website đặt một chiều rộng cố định là 800px thì chắc chắn nếu xem ở trình duyệt điện thoại với chiều ngang chỉ từ 320px – 420px ...