Bài 22: Thuộc tính Float và Clear trong CSS

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.

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:

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:

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;):

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ó:

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

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; 
}

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:

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:

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