Thuộc Tính FLOAT Và CLEAR Trong CSS

Trang chủ » Bỏ Float » Thuộc Tính FLOAT Và CLEAR Trong CSS

Có thể bạn quan tâm

Thuộc tính float

Thuộc tính Float sử dụng để chuyển một phần tử sang góc trái hoặc phải của không gian bao quanh nó, rất cần thiết trong việc định dạng bố cục trang.

Theo mặc định, tất cả các phần tử HTML là không float.

Thuộc tính Float có thể có một trong các giá trị sau:

  • left: Cố định phần tử về bên trái.
  • right: Cố định phần tử về bên phải.
  • none: Nằm tại chính vị trí của nó (trạng thái bình thường).
  • inherit (kế thừa): Phần tử kế thừa giá trị từ float cha.

Cú pháp của Float

tagName { float: giá trị;}

Chú ý: Khi một thành phần được CSS float là left hoặc right thì tất cả các thẻ cùng cấp phía sau nó sẽ được tràn lên phía trên và lấp đầy chỗ trống của hàng chứa thẻ được CSS float left hoặc right.

Ví dụ - float: right

Ví dụ sau cố định một hình ảnh nổi bên phải cạnh một đoạn văn bản:

Float: right cố định một hình ảnh nổi bên phải cạnh một đoạn văn bản

<!DOCTYPE html><html><head><style> img { float: right}p{ background:#FFFACD}</style></head><body><p>Trong ví dụ này, hình ảnh sẽ nổi bên phải và văn bản sẽ bao quanh hình ảnh.</p><p><img src="qua-nho.jpg" alt="Quả nho" style="width:170px;height:170px;margin-left:15px;">Nho là một loại quả mọng lấy từ các loài cây thân leo thuộc chi Nho (Vitis). Quả nho mọc thành chùm từ 6 đến 300 quả, chúng có màu đen, lam, vàng, lục, đỏ-tía hay trắng. Khi chín, quả nho có thể ăn tươi hoặc được sấy khô để làm nho khô, cũng như được dùng để sản xuất các loại rượu vang, thạch nho, nước quả, mật nho, dầu hạt nho. Trong tiếng Trung, nó được gọi là bồ đào và khi người ta nói đến rượu bồ đào tức là rượu sản xuất từ quả nho. Phần lớn nho đượcthu hoạch từ loài được trồng là Vitis vinifera, loài làm rượu vang châu Âu bản địa của vùng Địa Trung Hải và Trung Á. Một lượng nhỏ trái và rượu có nguồn gốc từ các loài châu Mỹ và châu Á.</p></body></html>

Ví dụ - float: left

Ví dụ sau cố định một hình ảnh nổi bên trái cạnh một đoạn văn bản:

Float: left cố định một hình ảnh nổi bên trái cạnh một đoạn văn bản

<!DOCTYPE html><html><head><style> img { float: left}p{ background:#FFFACD}</style></head><body><p>Trong ví dụ này, hình ảnh sẽ nổi bên trái và văn bản sẽ bao quanh hình ảnh.</p><p><img src="qua-nho.jpg" alt="Quả nho" style="width:170px;height:170px;margin-left:15px;">Nho là một loại quả mọng lấy từ các loài cây thân leo thuộc chi Nho (Vitis). Quả nho mọc thành chùm từ 6 đến 300 quả, chúng có màu đen, lam, vàng, lục, đỏ-tía hay trắng. Khi chín, quả nho có thể ăn tươi hoặc được sấy khô để làm nho khô, cũng như được dùng để sản xuất các loại rượu vang, thạch nho, nước quả, mật nho, dầu hạt nho. Trong tiếng Trung, nó được gọi là bồ đào và khi người ta nói đến rượu bồ đào tức là rượu sản xuất từ quả nho. Phần lớn nho đượcthu hoạch từ loài được trồng là Vitis vinifera, loài làm rượu vang châu Âu bản địa của vùng Địa Trung Hải và Trung Á. Một lượng nhỏ trái và rượu có nguồn gốc từ các loài châu Mỹ và châu Á.</p></body></html>

Ví dụ - float: none

Ví dụ sau hình ảnh sẽ được hiển thị ngay tại nơi nó xuất hiện mặc định.

float: none hiển thị ảnh ngay tại nơi nó xuất hiện mặc định.

<!DOCTYPE html><html><head><style> img { float: none}p{ background:#FFFACD}</style></head><body><p>Trong ví dụ này, hình ảnh sẽ được hiển thị ngay tại nơi nó xuất hiện mặc định.</p><p><img src="qua-nho.jpg" alt="Quả nho" style="width:170px;height:170px;margin-left:15px;">Nho là một loại quả mọng lấy từ các loài cây thân leo thuộc chi Nho (Vitis). Quả nho mọc thành chùm từ 6 đến 300 quả, chúng có màu đen, lam, vàng, lục, đỏ-tía hay trắng. Khi chín, quả nho có thể ăn tươi hoặc được sấy khô để làm nho khô, cũng như được dùng để sản xuất các loại rượu vang, thạch nho, nước quả, mật nho, dầu hạt nho. Trong tiếng Trung, nó được gọi là bồ đào và khi người ta nói đến rượu bồ đào tức là rượu sản xuất từ quả nho. Phần lớn nho đượcthu hoạch từ loài được trồng là Vitis vinifera, loài làm rượu vang châu Âu bản địa của vùng Địa Trung Hải và Trung Á. Một lượng nhỏ trái và rượu có nguồn gốc từ các loài châu Mỹ và châu Á.</p></body></html>

Thuộc tính Clear

Clear gần như là ngược lại với float. Thuộc tính Clear ngăn chặn thành phần A chiếm vùng không gian của thành phần B (với thành phần B là thành phần sử dụng float). Đôi khi không muốn float ở một số tình huống nào đó ta sẽ dùng clear để khắc chế.

Nói một cách đơn giản, clear sử dụng để giải quyết vấn đề trong mục chú ý của thuộc tính float phía trên.

Thuộc tính float có thể có một trong các giá trị sau:

  • left: Tràn về phía bên trái.
  • right: Tràn về phía bên phải.
  • none: Cho phép tràn lên cả hai phía (mặc định).
  • both: Không cho phép tràn về bên nào
  • inherit (kế thừa): Phần tử kế thừa giá trị từ float cha.

Cách phổ biến nhất để sử dụng thuộc tính Clear là dùng sau khi bạn đã sử dụng thuộc tính Float trên một phần tử. Nếu một phần tử được float sang bên trái, thì bạn nên clear bên trái. Phần tử Float của bạn sẽ tiếp tục nổi, nhưng phần tử bị xóa sẽ xuất hiện bên dưới nó trên trang web.

Ví dụ sau clear left, có nghĩa là không có phần tử float nào nổi ở phía bên trái của div:

<!DOCTYPE html><html><head><style>.div1 { float: left; width: 100px; height: 100px; margin: 10px; border: 3px solid #73AD21;}.div2 { border: 1px solid red;}.div3 { float: left; width: 100px; height: 100px; margin: 10px; border: 3px solid #73AD21;}.div4 { border: 1px solid red; clear: left;}</style></head><body><h2>Không dùng Clear</h2><div class="div1"><img src="qua-nho.jpg" alt="Quả nho" style="width:100px;height:100px"></div><div class="div2">div2 nằm sau div1 trong code HTML. Tuy nhiên, vì div1 float sang trái nên văn bản trong div2 trôi xung quanh div1.</div><br><br><br><br><h2>Sử dụng Clear</h2><div class="div3"><img src="qua-nho.jpg" alt="Quả nho" style="width:100px;height:100px"></div><div class="div4">Ví dụ này sử dụng clear: left; chuyển div4 xuống dưới div3 đang float, nghĩa là clear các phần tử tràn vào phía bên trái.</div></body></html>

Thuộc tính Clear

Clearfix

Clearfix trong CSS là cách sử dụng các thuộc tính CSS để điều chỉnh vùng không gian của thẻ cha so với các thẻ con có sử dụng float. Nếu một phần tử đang được float cao hơn phần tử cha thì sẽ gây ra hiện tượng tràn nội dung ra bên ngoài. Để khắc phục, ta sử dụng class clearfix overflow: auto:

<!DOCTYPE html><html><head><style>div { border: 3px solid #4CAF50; padding: 5px;}.img1 { float: right;}.clearfix { overflow: auto;}.img2 { float: right;}</style></head><body><p>Trong ví dụ này, hình ảnh đang được float vào cao hơn thành phần chứa nó, do đó bị tràn ra bên ngoài:</p><div><img class="img1" src="float-qua-nho.jpg" alt="Quả nho" width="170" height="170">Nho là một loại quả mọng lấy từ các loài cây thân leo thuộc chi Nho (Vitis). Quả nho mọc thành chùm từ 6 đến 300 quả, chúng có màu đen, lam, vàng, lục, đỏ-tía hay trắng.</div><p style="clear:right">Sử dụng class clearfix với giá trị overflow: auto để khắc phục:</p><div class="clearfix"><img class="img2" src="float-qua-nho.jpg" alt="Quả nho" width="170" height="170">Nho là một loại quả mọng lấy từ các loài cây thân leo thuộc chi Nho (Vitis). Quả nho mọc thành chùm từ 6 đến 300 quả, chúng có màu đen, lam, vàng, lục, đỏ-tía hay trắng. </div></body></html>

Sử dụng Clearfix

Clearfix overflow: auto được sử dụng rất hiệu quả, tuy nhiên khuyến nghị nên sử dụng Clearfix mới tiện ích và dễ dùng hơn, được sử dụng cho hầu hết các web hiện nay:

.clearfix::after { content: ""; clear: both; display: table;}

Bố cục lưới dạng hộp

Ứng dụng tốt nhất của float là tạo bố cục dạng hộp đặt cạnh nhau.

Bố cục lưới dạng hộp

* { box-sizing: border-box;}.box { float: left; width: 33.33%; /* lưới 3 (4 box thì 25%, 2 box thì 50%) */ padding: 50px; /* tạo khoảng cách giữa các box */}

Ví dụ:

Ví dụ Bố cục lưới dạng hộp

<!DOCTYPE html><html><head><style>* { box-sizing: border-box;}.box { float: left; width: 33.33%; padding: 50px;}.clearfix::after { content: ""; clear: both; display: table;}</style></head><body><h2>Bố cục dạng lưới hộp</h2><p>Float để các box cạnh nhau:</p><div class="clearfix"> <div class="box" style="background-color:#bbb"> <p>Website Quản trị mạng</p> </div> <div class="box" style="background-color:#ccc"> <p>Website Quản trị mạng</p> </div> <div class="box" style="background-color:#ddd"> <p>Website Quản trị mạng</p> </div></div><p>Sử dụng clearfix để xử lý layout flow và add thêm thuộc tính box-sizing để kích thước box không thay đổi nếu có bổ sung thêm padding và border. Bạn có thể thử bỏ thuộc tính này để xem rõ hiệu quả.</p></body></html>

Bố cục hình ảnh đặt cạnh nhau

Float bố cục dạng lưới hộp như ví dụ trên cũng có thể được sử dụng để hiển thị các ảnh cạnh nhau

.img-container { float: left; width: 33.33%; /* 3 ảnh (4 ảnh thì 25%, 2 ảnh thì 50%...) */ padding: 5px; /* tạo khoảng cách giữa các ảnh */}

Ví dụ:

Bố cục hình ảnh đặt cạnh nhau

<!DOCTYPE html><html><head><style>* { box-sizing: border-box;}.img-container { float: left; width: 33.33%; padding: 5px;}.clearfix::after { content: ""; clear: both; display: table;}</style></head><body><h2>Bố cục hình ảnh đặt cạnh nhau</h2><p>Float hình ảnh cạnh nhau:</p><div class="clearfix"> <div class="img-container"> <img src="flowers-1.jpg" alt="Beautiful flowers 1" style="width:100%"> </div> <div class="img-container"> <img src="flowers-2.jpg" alt="Beautiful flowers 2" style="width:100%"> </div> <div class="img-container"> <img src="flowers-3.jpg" alt="Beautiful flowers 3" style="width:100%"> </div></div><p>Sử dụng clearfix để xử lý layout flow và add thêm thuộc tính box-sizing để kích thước box không thay đổi nếu có bổ sung thêm padding và border. Bạn có thể thử bỏ thuộc tính này để xem rõ hiệu quả.</p></body></html>

Bố cục box chiều cao bằng nhau

Trong ví dụ trước, ta đã học cách float các box cạnh nhau với chiều rộng bằng nhau. Tuy nhiên, không dễ để tạo ra các box có chiều cao bằng nhau. Cách khắc phục nhanh là đặt chiều cao cố định:

.box { height: 500px;}

Ví dụ:

Bố cục box chiều cao bằng nhau

<!DOCTYPE html><html><head><style>* { box-sizing: border-box;}.box { float: left; width: 50%; padding: 50px; height: 300px;}.clearfix::after { content: ""; clear: both; display: table;}</style></head><body><h2>Bố cục box chiều cao bằng nhau</h2><p>Float các box và đặt chiều cao cố định:</p><div class="clearfix"> <div class="box" style="background-color:#bbb"> <h2>Box 1</h2> <p>Website Quản trị mạng</p> </div> <div class="box" style="background-color:#ccc"> <h2>Box 2</h2> <p>Website Quản trị mạng</p> <p>Website Quản trị mạng</p> <p>Website Quản trị mạng</p> </div></div></body></html>

Tuy nhiên, ví dụ này không linh hoạt lắm. Đoạn code này sẽ rất đẹp nếu bạn đảm bảo rằng các box sẽ luôn có cùng một lượng nội dung. Nếu bạn thử ví dụ trên trên điện thoại di động, bạn sẽ thấy nội dung của box 2 sẽ hiển thị tràn ra ngoài hộp. Vì vậy, nên sử dụng Flexbox vì nó có thể tự động kéo dài các hộp.

<!DOCTYPE html><html><head><style>.flex-container { display: flex; flex-wrap: nowrap; background-color: DodgerBlue;}.flex-container .box { background-color: #f1f1f1; width: 50%; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;}</style></head><body><h1>Flexible Box</h1><div class="flex-container"> <div class="box">Box 1 - Đây là một đoạn văn bản dài. Quantrimang.com khởi nguồn từ một trang web cung cấp kiến thức về mạng, server, các thiết bị mạng, thủ thuật máy tính.</div> <div class="box">Box 2 - Chiều dài box 2 kéo dài theo box 1.</div></div></body></html>

Hãy thử thay đổi kích thước cửa sổ trình duyệt để xem bố cục linh hoạt.

Chú ý: Flexbox không được hỗ trợ trong Internet Explorer 10 và các phiên bản cũ hơn.

Menu điều hướng (Navigation Menu)

Dùng float với các hyperlink để tạo menu nằm ngang trên trang dạng như này:

Navigation Menu

<!DOCTYPE html><html><head><style>ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333;}li { float: left;}li a { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}li a:hover { background-color: #111;}.active { background-color: red;}</style></head><body><ul> <li><a href="#trangchu" class="active">Trang chủ</a></li> <li><a href="#langcongnghe">Làng công nghệ</a></li> <li><a href="#congnghe">Công nghệ</a></li> <li><a href="#khoahoc">Khoa học</a></li></ul></body></html>

Ví dụ về bố cục web

Đây là bố cục website rất phổ biến sử dụng thuộc tính float:

Bố cục website rất phổ biến sử dụng thuộc tính float

<!DOCTYPE html><html><head><style>* { box-sizing: border-box;}.header, .footer { background-color: Purple; color: white; padding: 15px;}.column { float: left; padding: 15px;}.clearfix::after { content: ""; clear: both; display: table;}.menu { width: 25%;}.content { width: 75%;}.menu ul { list-style-type: none; margin: 0; padding: 0;}.menu li { padding: 8px; margin-bottom: 8px; background-color: purple; color: #ffffff;}.menu li:hover { background-color: #DB7093;}</style></head><body><div class="header"> <h1>Quản trị mạng</h1></div><div class="clearfix"> <div class="column menu"> <ul> <li>Làng công nghệ</li> <li>Công nghệ</li> <li>Khoa học</li> <li>Cuộc sống</li> <li>Ứng dụng</li> <li>Lập trình</li> </ul> </div> <div class="column content"> <h1>Làng Công nghệ</h1> <p>Cập nhật những xu hướng, khám phá, nghiên cứu mới nhất về khoa học công nghệ.</p> <p>Bạn có thể trở thành một phần của Quantrimang.com bằng cách gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã hội thông qua địa chỉ email [email protected] hoặc đăng ký tài khoản và đăng bài trực tiếp trên Quantrimang.com.</p> </div></div><div class="footer"> <p>Bản quyền © 2003-2019 QuanTriMang.com.</p></div></body></html>

Bài trước: Overflow trong CSS

Bài tiếp: Thuộc tính Display (inline-block) trong CSS

Từ khóa » Bỏ Float