Trang chủ Web DevelopmentHTML/CSS [Học CSS] Chia cột với float và clear float

[Học CSS] Chia cột với float và clear float

bởi Thạch Phạm
22 bình luận 17815 views
Khuyến mãi hosting

Chào mừng các bạn đến với một kỹ thuật rất quan trọng trong CSS Layout, mà đã từng làm nhiều người phải “sợ” nó, đó chính là học cách chia cột trên CSS. Có thể nói rằng, website bạn soạn ra bằng văn bản HTML sẽ luôn luôn có một cột duy nhất mà 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.

Chia cột trong CSS là thế nào?

Việc chia cột trong CSS là việc bạn thiết lập những phần tử con trong một phần tử mẹ nằm trên cùng một hàng. Ví dụ, mình muốn phần nội dung website của mình có hai cột thì mình sẽ tạo ra 3 cái <div>, một cái <div> mình gọi nó là container hoặc phần tử mẹ, hai cái <div> còn lại mình gọi là column (cột).


<div id="content" class="container">

   <div id="post">Nội dung của #post</div>

   <div id="sidebar">Nội dung của #sidebar</div>

</div>

Ở ví dụ trên, mình có phần #content chứa hai cột đó là #post và #sidebar. Sở dĩ mình dùng thêm class container cho #content là vì mình muốn sau này có muốn chia thêm cột cho các phần tử khác trong website thì sẽ có thể tái sử dụng cái class này, đơn giản là thói quen của mình thôi chứ bạn không cần cũng được.

Và bây giờ, nhiệm vụ của chúng ta trong bài này là sẽ làm thế nào để cái #post và #sidebar nằm thẳng hàng với nhau.

Các bước chia cột trong CSS

Khi chia cột trong CSS, bạn nên làm tuần tự đầy đủ các bước sau để chia cột được chính xác:

  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 hai cột, tổng chiều rộng trong hai 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.

Cách chia cột trong CSS

Bây giờ mình sẽ tiến hành chia cột dựa theo đoạn HTML mẫu ở trên nhé.

Trước tiên, chúng ta sẽ tiến hành thiết lập chiều rộng cho class container, nên thêm một cái border để tí nữa bạn sẽ hiểu clear float là thế nào:


/*==Thiết lập container==*/

.container {
   width: 960px;
   border: 1px solid #333;
   padding: 10px;
}

Tiếp tục, chúng ta thiết lập chiều rộng của #post và mình sẽ muốn cột #post sẽ chiếm 660px, đồng thời thêm màu sắc cho hai thằng này để dễ nhìn một xíu.


/*==cột #post==*/
#post {
   width: 660px;
   height: 150px;
   background: #e8e8e8;
}

Tương tự với #sidebar nhưng ta muốn cột #sidebar chỉ 300px mà thôi.


/*==cột #sidebar==*/
#sidebar {
 width: 300px;
 height: 150px;
 background: #b1b1b1;
}

Giờ ta đã có được như thế này:

chia-cot-css-01

Okay, bây giờ mình muốn cái #post nó sẽ nằm bên trái của #sidebar, nên mình sẽ gắn thêm cho #post một thuộc tính float với giá trị làleft.

float: left;

Đồng thời, mình muốn thằng #sidebar sẽ nhảy qua bên phải nên mình sẽ có thuộc tính float cho nó với giá trị làright.

float: right;

Kết quả thật dễ thương, hai em ấy đã nằm trên cùng một hàng.

chia-cot-css-02

Nhưng bạn có để ý là cái container nó bị co lại bên trên không? Nói đúng hơn là bây giờ thằng #post và #sidebar đã nhảy ra khỏi cái container luôn rồi. Thế làm sao để cho 2 cột này hiển thị bên trong container đây? Bạn sẽ làm gì? Đặt height cho container dài ra thêm hả? Không hề, mà chúng ta sẽ tiến hành clear float.

Clear float là như thế nào?

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ó. Thế nhưng một vấn đề xảy ra là khi bạn cho toàn bộ các phần tử trong một container float hết thì có nghĩa là thằng container cũng sẽ hiển thị bao bọc xung quanh các phần tử được float, thành ra nó mới bị cái lỗi buồn cười như ở 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.

Về clear float thì có rất nhiều cách, tùy theo trường hợp mà chúng ta sẽ sử dụng cách phù hợp.

Cách 1. Sử dụng thẻ div trống

Cách này khá phổ biến từ rất lâu rồi, đó là chúng ta sẽ tạo ra một class riêng cho việc clear float và khai báo thêm một thẻ <div> nữa với class này rồi đặt nó bên dưới của cột cuối cùng.

Bây giờ mình sẽ viết một đoạn CSS cho class tên là .clear như sau:


.clear { clear: both }

Thuộc tính clear này nghĩa là thiết lập không cho phép các phần tử khác float xuống nó, nó có các giá trị là left right bothnone. Và bạn chỉ nên dùng giá trị both thôi để clear cả 2 bên.

Bây giờ, mình sẽ khai báo một thẻ <div> với class là clear và đặt nó ngay bên dưới cái cột #sidebar (cột cuối cùng của hàng).


<div id="content" class="container">

   <div id="post">Nội dung của #post</div>
   <div id="sidebar">Nội dung của #sidebar</div>
   <div class="clear"></div>

</div>

Kết quả:

chia-cot-css-03

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.

Lời kết

Nếu bạn đọc tới đây thì có thể sẽ rất vui vì mình biết là có rất nhiều bạn có nhu cầu chia cột cho website mà không biết làm thế nào, đó chính là sử dụng các thuộc tính float mình đã đề cập ở trên và nhớ là clear float cho mỗi container.

22 bình luận

Có thể bạn quan tâm

22 bình luận

Dat Nguyễn 22/04/2020 - 1:06 Chiều

hay dã man 😀

Reply
DÀN TRANG VỚI CSS FLEXBOX TOÀN TẬPDÀN TRANG VỚI CSS FLEXBOX TOÀN TẬPDÀN TRANG VỚI CSS FLEXBOX TOÀN TẬPDÀN TRANG VỚI CSS FLEXBOX TOÀN TẬP – ASECO AUTO – Khác Biệt Tạo Nên Giá Trị 01/03/2019 - 12:12 Sáng

[…] từ trước tới nay nếu chúng ta muốn dàn layout của trang thì sẽ sử dụng các thuộc tính float và kỹ thuật clear float để chia cột website như ý muốn. Hoặc muốn thuận tiện hơn thì sử dụng […]

Reply
DÀN TRANG VỚI CSS FLEXBOX TOÀN TẬP – Bloglaptrinh 09/09/2018 - 12:41 Sáng

[…] từ trước tới nay nếu chúng ta muốn dàn layout của trang thì sẽ sử dụng các thuộc tính float và kỹ thuật clear float để chia cột website như ý muốn. Hoặc muốn thuận tiện hơn thì sử dụng […]

Reply
DÀN TRANG VỚI CSS FLEXBOX TOÀN TẬP - Nguyễn Văn Xuyên 17/09/2017 - 2:10 Chiều

[…] từ trước tới nay nếu chúng ta muốn dàn layout của trang thì sẽ sử dụng các thuộc tính float và kỹ thuật clear float để chia cột website như ý muốn. Hoặc muốn thuận tiện hơn thì sử dụng […]

Reply
Cường 02/07/2017 - 6:34 Sáng

Hi anh,
Em làm phần này trên HTML và cho hiển thị luôn chứ không dùng codepen như anh, e cho width của container 960px, của post là 560px và sidebar là 400px. Nhưng container vẫn rộng hơn hai cái post và sidebar cộng lại. Ngoài ra boder của container không hiển thị. Anh cho em hỏi có phải là do có sự sai khác khi hiển thị hay do lỗi? Cảm ơn anh

Reply
phương 28/03/2017 - 9:39 Chiều

cho em hỏi. muốn thêm cột thì làm thế nào ạ 🙁

Reply
linh 27/12/2016 - 3:12 Chiều

e làm theo cách này nhưng hiển thị lên trang web thì không hiện thị đc ak!

Reply
huy 18/12/2016 - 1:49 Chiều

anh dùng phần mềm soạn thỏa gì vậy?

Reply
Chung cư Eco Lake View 05/12/2016 - 3:39 Chiều

đọc mãi mà làm vẫn sai.

Reply
Thủy Phạm 12/09/2016 - 9:13 Chiều

Bạn ơi mình muốn tạo 2 3 4 …. cái sidebar nằm ở bên phải phần #post , sao cho tổng chiều cao của các phần sidebar đó = chiều cao của post thì viết sao bạn ?

Reply
Cường 27/08/2016 - 4:35 Chiều

Cấu trức trang website

&lt;div=&quot;hear&quot;

<img src="https://maxcdn.thedesigninspiration.com/wp-content/uploads/2010/10/Dream-Shepherds-l.jpg" width="200px" height="auto" />
<!--id header -->

<ul>
<li><img src="https://images.tapchianhdep.net/15-12hinh-anh-buon-dep-khi-tinh-yeu-khong-tron-ven5.jpg" width="100px" height="40px" /></li>
<li><img src="https://images.tapchianhdep.net/15-12hinh-anh-buon-dep-khi-tinh-yeu-khong-tron-ven5.jpg" width="100px" height="40px" /></li>
</ul>

<ul>
<li><a href="http://vforum.vn/diendan/showthread.php?61619-Bang-ma-mau-HEX-RGB-CMYK-day-du-cho-CSS-HTML"> Liên Kết </a></li>
<li><a href="http://hocwebchuan.com/"> Góp ý </a></li>
<li><a href="http://hocwebchuan.com/tutorial/tut_css_header.php"> Mật Trang </a></p>
<li><a href="http://vforum.vn/">Báo lỗi </a></p>
</ul>
<!-- id headi-->
<!-- hear -->

<p><a href="http://vforum.vn/" /> Trang chủ </a></p>
<p><a href="http://hocwebchuan.com/"> Giới Thiệu </a></p>
<p><a href="http://vforum.vn/diendan/showthread.php?61619-Bang-ma-mau-HEX-RGB-CMYK-day-du-cho-CSS-HTML"> Báo lỗi </a></p>
<p><a href="http://hocwebchuan.com/tutorial/tut_css_combine.php"> Dịch Vụ </a></p>
<!-- id class -->

Giới thiệu sản phẩm
<img height="auto" />
<!-- id pipo-->
&lt;div id=&quot;gNav&quot;

<!--id yamaguchi-->

Đoạn css là
*{
margin:0;
padding:0;}
}

#header{
float: left;
width: 660px;
height: 150px
}
#headi{
float:right;
width: 300px;
height: 150px
}
#class{
clear;left;
}

với trang website này phần Liên Kết. GÓP Ý… Sao nó hiển bên phải phần Trang chủ, Gioi thiệu, báo lỗi lun vậy ạ

Reply
Kid1412 26/08/2016 - 2:48 Chiều

mình đang làm thử cái nút chia sẻ mạng xã hội, mình đặt nút chia sẻ của Google và FB vào (2 thẻ DIV)
nhưng nó cứ bị hàng trên hàng dưới, đã thử đủ cách mà ko được.
bạn giúp
<div id="chiase" class="container">
<div id="google"><div class="g-plus" data-action="share" data-annotation="bubble"></div>
<div class="g-plusone" data-size="medium"></div></div>
<div id="fbshare"><div class="fb-like" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div></div>
<div id="fbsent"><divclass="fb-send"></div> </div>
</div>

CSS:
#chiase .container{padding:0 20px;}
#chiase #google {float:left;}
#chiase #fbshare {float:left;}
#chiase #fbsent {float:left;}

Reply
Thạch Phạm 27/08/2016 - 6:24 Chiều

Theo mình biết thì do mấy cái nút đó có style riêng khi nhúng vào. Cụ thể là cái nút của Facebook sẽ bị tụt xuống một chút. Bạn có thể ép cho cái nút Facebook có margin-top là số nguyên âm để nó chạy lên nhé.

Reply
Kid1412 30/08/2016 - 4:04 Chiều

tức là mình sẽ thêm cái margin vào css hay cho luôn vào mã nhúng của thằng FB vậy b?

Reply
Thạch Phạm 31/08/2016 - 1:22 Chiều

Bạn viết CSS thêm margin vào CSS của website nhé, nhớ sử dụng !important để ép nó sử dụng.

Reply
Hungphieu 20/08/2016 - 11:22 Chiều

Bạn giải thích rất dễ hiểu. Cảm ơn bạn!
Bạn cho mình hỏi, giờ mình muốn chèn thêm ảnh nền cho cái thẻ div mẹ, với cả khi load nhiều kích thước màn hình sẽ tự động fix tương ứng mà không bị vỡ.
Cảm ơn nhiều!

Reply
Huyền 16/08/2016 - 7:25 Chiều

Chào a! A cho e hỏi là vd mình có 5 cột thì cột 1 cột 5 left và right rồi,còn 3 cột giữa thì làm sao để nó cùng hàng hết ạ.
VD container 900px: cột 1 left 300px, cột 2 ? 100px, cột 3 ? 200px, cột 4 ? 200px, cột 5 right 100px,

Reply
Nguyen 11/07/2016 - 9:15 Chiều

a cho e hỏi tại sao khi chỉ để float:left ở Post và xóa float:right ở sidebar thì mất sidebar ạ

Reply
Thạch Phạm 13/07/2016 - 2:21 Chiều

Tại vì sidebar lúc đó chưa được float nên nó sẽ hiển thị phía dưới. Bạn phải float cái sidebar qua right nhé.

Reply
MrKCường 05/07/2016 - 5:32 Chiều

Đây là CSS của mình
Mình ko thể để kích thước là 960px để 960 thì dùng clear hay overflơw đều bị tràn xuống nếu để 962px thì được. Ad có thể giai thích hộ mình được ko?

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container{
width: 962px; /* ??? */

border: 1px solid #333;
margin: 10px auto;

}
#post {
width: 660px;
height: 150px;
background: #8e8e8e;
float: left;
}
#sidebar{
width: 300px;
height: 150px;
background: #b1b1b1;
float: right;
}
.clear{
clear: both;
}

Reply
Thạch Phạm 06/07/2016 - 5:34 Sáng

Đơn giản là cái container chứa 2 cái div kia nên nó sẽ bị dư ra 1px. Bạn thêm box-sizing: content-box vào container là được.

Reply
le minh tien 27/03/2017 - 10:16 Chiều

anh ơi , em muốn sửa tiêu đề nằm dưới bài hình bài đăng , em chỉnh sao h mất luôn tiêu đề @@

Reply

Để lại một bình luận

* Khi bình luận, bạn đồng ý rằng thông tin bạn nhập vào bao gồm tên, email và địa chỉ IP sẽ được lưu giữ tại website.