Float

Trước khi học nội dung về thuộc tính float, bạn hãy xem trước vùng không gian của HTML để hiểu rõ hơn cách sắp xếp không gian trong một trang HTML, nếu chưa hiểu vùng không gian HTML thì bạn sẽ rất khó hình dung được nội dung bài học.

Thuộc tính float: xác định sự trôi nổi của thành phần.

Nếu chỉ định nghĩa thuộc tính float đơn giản như vậy chắc chắn chúng ta sẽ không thể nào hiểu được thuộc tính này, chúng ta hãy xem trước các giá trị của float để xem thuộc tính float tác động lên thành phần như thế nào, rồi sau đó chúng ta sẽ rút ra định nghĩa về float, hãy kiên nhẫn từng bước:

Chưa có float

Thành phần A
Thành phần B
.box-1 {
}
.box-2 {
}

Columns

30%
70%
.box-1 {
	*width: 30%;
	*float: left;
}
.box-2 {
	*width: 70%;
	*float: left;
}

Columns + border

Error

30%
70%
.box-1 {
	*width: 30%;
	*float: left;
	*border: 4px solid yellow;
}
.box-2 {
	*width: 70%;
	*float: left;
	*border: 4px solid green;
}

Columns + padding

Error

30%
70%
.box-1 {
	*width: 30%;
	*float: left;
	*padding: 2rem;
}
.box-2 {
	*width: 70%;
	*float: left;
	*padding: 2rem;
}

Fixed

width: calc(70% - 8px - 4rem);

30%
70%
.box-1 {
	*float: left;
	*border: 4px solid yellow;
	*padding: 2rem;
	*width: calc(30% - 8px - 4rem);
}
.box-2 {
	*float: left;
	*border: 4px solid green;
	*padding: 2rem;
	*width: calc(70% - 8px - 4rem);
}

box-sizing: border-box;

30%
70%
.box-1 {
	*width: 30%;
	*float: left;
	*border: 4px solid yellow;
	*padding: 2rem;
	*box-sizing: border-box;
}
.box-2 {
	*width: 70%;
	*float: left;
	*border: 4px solid green;
	*padding: 2rem;
	*box-sizing: border-box;
}
Định nghĩa về float

Từ những ví dụ về float: left và float: right ta có thể rút ra kết luận về thuộc tính float như sau:

  • Thành phần nào sử dụng float sẽ được giải phóng vùng không gian, vùng không gian này sẽ trở thành vùng trống, và sẽ bị vùng không gian của những thành phần liền kề nó lập tức chiếm lấy.
  • Khi sử dụng float, các thành phần không chồng chập lên nhau, mà sẽ sắp xếp vị trí tùy thuộc vào chiều rộng của vùng trống.
  • Khi sử dụng float: left, vùng không gian của thành phần sẽ được giải phóng và thành phần sẽ trôi sang trái.
  • Khi sử dụng float: right, vùng không gian của thành phần sẽ được giải phóng và thành phần sẽ trôi sang phải.

Clear

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).

Thuộc tính clear có các giá trị sau:

  • clear: left
  • clear: right
  • clear: both
  • clear: none

ClearFix

Thủ thuật clearfix không phải là dạng thuộc tính, mà nó là sự kết hợp của nhiều thuộc tính khác nhau nhằm tạo vùng không gian tạm thay thế vùng không gian bị giải phóng khi thành phần sử dụng float.

Khi thành phần có sử dụng float, thì thành phần sẽ dễ dàng điều khiển các thuộc tính padding và margin chính xác hơn vì gốc tính padding và margin sẽ không còn bị ảnh hưởng bởi float.

alt

.clearfix:after {
	*clear: both;
	*content: ""
	*display: block;
	*height: 0;
	*line-height: 0;
	*visibility: hidden;
}
Home
TOP