Bài 22: Thuộc Tính Float Và Clear Trong CSS | Tìm ở đây

Thuộc tính float trong CSS thiết lập phần tử sang bên trái hoặc bên phải.

Thuộc tính clear trong CSS thiết lập phần tử nào có thể trôi nổi bên cạnh phần tử đã xóa và ở phía nào.

Float LeftFloat Right

Thuộc tính float

Thuộc tính float được sử dụng để định vị và định dạng nội dung, ví dụ: để một hình ảnh trôi sang trái với văn bản trong một vùng chứa.

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

• left– Phần tử hiển thị ở bên trái vùng chứa của nó
• right– Phần tử hiển thị ở bên phải vùng chứa của nó
• none– Phần tử không hiển thị (sẽ được hiển thị ngay tại nơi nó xuất hiện trong văn bản). Đây là mặc định
• inherit– Phần tử kế thừa giá trị float của phần tử cha của nó

Trong cách sử dụng đơn giản nhất, thuộc tính floatcó thể được sử dụng để bọc văn bản xung quanh hình ảnh.

Ví dụ – float:right

Ví dụ sau chỉ định rằng một hình ảnh phải trôi sang bên phải trong văn bản:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.

Ví dụ:

img { float: right; }

Ví dụ – float:left

Ví dụ sau chỉ định rằng một hình ảnh phải trôi sang bên trái trong văn bản:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.

Ví dụ:

img { float: left; }

Ví dụ – float:none

Trong ví dụ sau, hình ảnh sẽ được hiển thị ngay nơi nó xuất hiện trong văn bản (float: none;):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.

Ví dụ:

img { float: none; }

Ví dụ – Thuộc tính Float hiển thị các khối cạnh nhau

Thông thường các phần tử div sẽ được hiển thị chồng lên nhau. Tuy nhiên, nếu chúng ta sử dụng float: left, chúng ta có thể để các phần tử hiển thị cạnh nhau:

Ví dụ:

div { float: left; padding: 15px; } .div1 { background: red; } .div2 { background: yellow; } .div3 { background: green; }

Thuộc tính Clear

Thuộc tính clear chỉ định những phần tử nào có thể trôi nổi bên cạnh phần tử đã xóa và ở phía nào.

Thuộc tính clear có thể có một hoặc nhiều giá trị:

• none – Cho phép phần tử hiển thị lên cả hai bên trái và phải. Đó là mặc định
• left– Không cho phần tử hiển thị phía bên trái
• right– Không cho phần tử hiển thị phía bên phải
• both – Không cho hiển thị ở cả hai bên trái và phải
• inherit– Phần tử kế thừa giá trị clear của phần tử gốc

Cách phổ biến nhất để sử dụng thuộc tính clear là sau khi bạn đã sử dụng thuộc tính float trên một phần tử.

Khi xóa float, bạn nên khớp phần clear với float: Nếu một phần tử được hiển thị ở phía bên trái, thì bạn nên xóa bên trái. Phần tử hiển thị của bạn sẽ tiếp tục trôi, nhưng phần tử đã xóa sẽ xuất hiện bên dưới phần tử đó trên trang web.

Ví dụ: xóa float ở bên trái. Có nghĩa là không có phần tử float nào được phép ở bên trái (của div):

Ví dụ:

div { clear: left; }

The clearfix Hack

Nếu một phần tử cao hơn phần tử chứa nó và nó được thả nổi, nó sẽ “tràn” ra bên ngoài vùng chứa của nó:

Without Clearfix

With Clearfix

Sau đó, chúng ta có thể thêm overflow: auto; vào phần tử chứa nó để khắc phục sự cố này:

Ví dụ:

.clearfix { overflow: auto; }

overflow: auto clearfix hoạt động tốt miễn là bạn có thể giữ quyền kiểm soát các lề và phần đệm của mình (nếu không, bạn có thể thấy thanh cuộn). Tuy nhiên, bản hack clearfix mới, hiện đại, an toàn hơn khi sử dụng và mã sau được sử dụng cho hầu hết các trang web:

Ví dụ:

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

Bố cục CSS – Các ví dụ sử dụng Float

Mục này chứa các ví dụ sử dụng Float phổ biến.

Lưới của hộp/ Hộp có chiều rộng bằng nhau

Box 1

Box 2

Box 1

Box 2

Box 3

Với thuộc tính float, thật dễ dàng để hiển thị các hộp nội dung cạnh nhau:

Ví dụ:

* { box-sizing: border-box; } .box { float: left; width: 33.33%; padding: 50px; } box-sizing là gì? Bạn có thể dễ dàng tạo ba hộp hiển thị cạnh nhau. Tuy nhiên, khi bạn thêm thứ gì đó để mở rộng chiều rộng của mỗi hộp (ví dụ: đệm hoặc đường viền), hộp sẽ bị vỡ. Thuộc tính kích thước hộp cho phép chúng tôi bao gồm phần đệm và đường viền trong tổng chiều rộng (và chiều cao) của hộp, đảm bảo rằng phần đệm nằm bên trong hộp và không bị vỡ.

Hình ảnh nằm cạnh nhau

Lưới của các hộp cũng có thể được sử dụng để hiển thị các hình ảnh cạnh nhau:

.img-container { float: left; width: 33.33%; padding: 5px; }

Hộp có chiều cao bằng nhau

Trong ví dụ trước, bạn đã học cách làm hiển thị các hộp cạnh nhau với chiều rộng bằng nhau. Tuy nhiên, để tạo ra những chiếc hộp hiển thị với chiều cao bằng nhau không phải là điều dễ dàng. Tuy nhiên, một cách khắc phục nhanh chóng là đặt một chiều cao cố định, như trong ví dụ dưới đây:

Box 1 Nội dung trong hộp

Box 2 Nội dung trong hộp

Nội dung trong hộp

Nội dung trong hộp

Ví dụ:

.box { height: 500px; }

Tuy nhiên, điều này không linh hoạt cho lắm. Sẽ không sao nếu bạn có thể đảm bảo rằng các hộp sẽ luôn có cùng một lượng nội dung trong đó. Nhưng nhiều khi, nội dung không giống nhau. Nếu bạn thử ví dụ trên trên điện thoại di động, bạn sẽ thấy rằng nội dung của hộp thứ hai sẽ được hiển thị bên ngoài hộp. Đây là lúc CSS3 Flexbox trở nên hữu ích – vì nó có thể tự động kéo dài các hộp thành hộp dài nhất:

Ví dụ:

Sử dụng Flexbox để tạo các hộp linh hoạt:

Box 1 – Đây là một số văn bản để đảm bảo rằng nội dung thực sự cao. Đây là một số văn bản để đảm bảo rằng nội dung thực sự cao. Đây là một số văn bản để đảm bảo rằng nội dung thực sự cao.Box 2 – Chiều cao dựa vào Box 1.

Navigation Menu

Sử dụng float với một danh sách hoặc siêu liên kết để tạo menu nằm ngang:

Ví dụ:

Ví dụ về bố cục trang Web

Nó cũng phổ biến để thực hiện toàn bộ bố cục web bằng cách sử dụng thuộc tính float:

Ví dụ:

.header, .footer { background-color: grey; color: white; padding: 15px; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } .menu { width: 25%; } .content { width: 75%; }

Tất cả các thuộc tính Float của CSS

Thuộc tính	Miêu tả
box-sizing	Xác định cách tính chiều rộng và chiều cao của một phần tử: chúng có bao gồm padding và borders, hoặc không
clear	Chỉ định phần tử nào có thể hiển thị bên cạnh phần tử đã xóa và ở phía nào
float	Chỉ định cách một phần tử sẽ hiển thị
overflow	Chỉ định điều gì sẽ xảy ra nếu nội dung tràn hộp chứa phần tử
overflow-x	Chỉ định những việc cần làm với các cạnh trái/phải của nội dung nếu nó làm tràn vùng nội dung của phần tử
overflow-y	Chỉ định những việc cần làm với các cạnh trên/dưới của nội dung nếu nó làm tràn vùng nội dung của phần tử