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

Chào mừng bạn đến với một kỹ thuật rất quan trọng trong CSS Layout, đã khiến nhiều người “sợ”, đó là học cách tách cột trên CSS. Có thể nói trang web bạn soạn thảo văn bản HTML sẽ luôn có một cột duy nhất mà nếu bạn muốn làm một trang web có từ hai cột trở lên thì chắc chắn bạn phải sử dụng CSS.

Làm thế nào để tách các cột trong CSS?

Phân chia cột trong CSS là của bạn để thiết lập các phần tử con trong một phần tử mẹ nằm trên cùng một hàng. Ví dụ, tôi muốn nội dung trang web của mình có hai cột, tôi sẽ tạo 3 <div>một <div> Tôi gọi nó là thùng đựng hàng hoặc phần tử cha, hai <div> phần còn lại tôi gọi là cột (column).

[html]

[/html]

Trong ví dụ trên, tôi có #content chứa hai cột là #post và #sidebar. Lý do tôi sử dụng lớp học thêm container cho #content Vì mình muốn sau này muốn chia nhiều cột hơn cho các phần tử khác trong website nên sẽ sử dụng lại class này, đơn giản là thói quen của mình thôi chứ các bạn không cần đâu.

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

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

Khi chia cột trong CSS, bạn nên thực hiện các bước sau theo trình tự đầy đủ để phân chia các cột một cách chính xác:

1. Các cột phải luôn có một vùng chứa, tức là phần tử mẹ bao bọc nó.
2. Đặt chiều rộng của vùng chứa.
3. Đặt 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 nhỏ hơn chiều rộng của vùng chứa.
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ử sang trái hoặc phải.
6. Tiến hành xóa float.

Cách tách cột trong CSS

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

Đầu tiên, chúng ta sẽ tiến hành thiết lập độ rộng cho lớp containernên thêm đường viền để sau này bạn sẽ hiểu rõ float là gì:

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

   width: 960px;

   border: 1px solid #333;

   padding: 10px;

}

Tiếp tục, chúng tôi đặt chiều rộng của #post và chúng tôi sẽ muốn cột #post chiếm 660px, đồng thời thêm màu cho hai kẻ này để dễ nhìn hơn một chút.

/*==cột #post==*/

#post {

   width: 660px;

   height: 150px;

   background: #e8e8e8;

}

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

/*==cột #sidebar==*/

#sidebar {

 width: 300px;

 height: 150px;

 background: #b1b1b1;

}

Bây giờ chúng ta có một cái gì đó như thế này:

Được rồi, bây giờ tôi muốn #post nó sẽ ở bên trái của #sidebarvì vậy tôi sẽ thêm nó cho #post một thuộc tính float với giá trị làleft.

float: left;

Đồng thời, tôi muốn anh ấy #sidebar Tôi sẽ chuyển sang bên phải để tôi có thuộc tính float cung cấp cho nó một giá trị củaright.

float: right;

Kết quả là dễ thương, hai người họ cùng một chiến tuyến.

Nhưng bạn có nhận thấy hộp đựng nó bị thu nhỏ ở phía trên không? Nói chính xác hơn, những kẻ #post và #sidebar hiện đã nhảy ra khỏi vùng chứa. Vậy làm cách nào để 2 cột này hiển thị bên trong container? Bạn sẽ làm gì? Đặt chiều cao để thùng hàng dài hơn? Không, nhưng chúng tôi sẽ làm điều đó phao rõ ràng.

Clear float là gì?

Khi chúng ta sử dụng thuộc tính float, điều đó có nghĩa là thiết lập một phần tử được đẩy sang trái hoặc phải và cho phép các phần tử lân cận được bao bọc xung quanh nó. Nhưng một vấn đề xảy ra là khi bạn để tất cả các phần tử trong một vùng chứa float, điều đó có nghĩa là vùng chứa cũng sẽ hiển thị được bao bọc xung quanh các phần tử nổi, vì vậy nó có một lỗi buồn cười. như trên.

Vì vậy, khi bạn float các phần tử, những gì bạn nên làm là tạo một điểm kết thúc cho float này, tức là bạn muốn nó bắt đầu không trôi ở bất cứ đâu. Được gọi bằng thuật ngữ CSS clear float.

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

Phương pháp 1. Sử dụng thẻ div trống

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

Bây giờ tôi sẽ viết một CSS cho lớp có tên .clear như sau:

.clear { clear: both }

Thuộc tính rõ ràng này có nghĩa là cài đặt không cho phép các phần tử khác trôi xuống trên nó, nó có các giá trị là left right both vànone. Và bạn chỉ nên sử dụng giá trị cả hai để xóa cả hai bên.

Bây giờ, tôi sẽ khai báo một thẻ <div> với lớp được thiết lập để xóa và đặt nó ngay dưới cột #sidebar (cột cuối cùng của hàng).

[html]

[/html]

Kết quả:

Phương pháp 2. Sử dụng tràn

Cách này gọn nhẹ hơn, không cần chỉnh sửa HTML, chỉ cần viết thêm overflow: auto; cho thùng chứa là được.

Kết quả tương tự như trên.

[codepen id=”EaBOgM”]

Phần kết

Đọc đến đây chắc các bạn sẽ rất vui vì mình biết có nhiều bạn cần chia cột cho website nhưng chưa biết cách, đó là sử dụng thuộc tính float mà mình đã nói ở trên và nhớ là clear float cho. mỗi thùng chứa.