Hãy chú ý đến những nhược điểm của float. Các phần tử khối và nội tuyến hoạt động với nhau như thế nào và có nên sử dụng chúng cùng nhau hay không. Hãy cùng chúng tôi phân tích thua lỗ là gì và cách giải quyết.
Mặc dù thực tế là trong bài viết trước, chúng tôi đã xây dựng một lưới đơn giản cho trang web bằng cách sử dụng phao, chúng ban đầu nhằm điều chỉnh luồng của các phần tử trong văn bản. Float có ba nghĩa: left - các phần tử bám vào lề trái; phải - các phần tử được ép vào cạnh bên phải; không có - Chế độ quấn bị tắt.
Một phần tử được bao bọc bằng float có thể được định kích thước và được đệm, nhưng nếu phần tử nằm trong dòng thì nó sẽ hoạt động giống như một phần tử khối.
.block1 {
float: trái;
chiều rộng: 150px;
}
.block2 {
float: phải;
chiều rộng: 150px;
}
Có một vấn đề khác khi sử dụng phao, đó là rơi ra khỏi luồng. Nó xuất hiện khi các khối đi lần lượt, nhưng chỉ một trong số chúng có thuộc tính float, sau đó nó sẽ nằm trên các khối còn lại, vì nó không nhìn thấy các khối khác. Các phần tử nội tuyến sẽ bao quanh các phần tử float, nhưng khối chứa văn bản này sẽ vẫn nằm dưới phần tử float.
Nhưng float tương tác với float như thế nào?
Chúng hoạt động giống như văn bản: chúng đứng nối tiếp nhau miễn là có không gian trống, và sau đó chuyển sang một dòng mới. Do đó, với sự trợ giúp của phao, chúng tôi bắt đầu xây dựng lưới. Nếu không còn chỗ trống, thì chúng sẽ bị di chuyển ra ngoài chiều rộng của trang web, tức là chúng sẽ không đi đến đâu cả.
Nếu float không nhìn thấy các phần tử khối đơn giản, thì các phần tử khối có thể được dạy để nhìn thấy float. Chúng tôi sử dụng thuộc tính rõ ràng, vô hiệu hóa gói từ mọi phía (hoặc từ các thuộc tính đã chọn). Đó là, một phần tử có clear sẽ nằm dưới phần tử có float.
