Phao CSS giải thích trong 5 câu hỏi

CSS "Floats" (các phần tử nổi) rất đơn giản để sử dụng nhưng một khi được sử dụng, hiệu ứng của nó đối với các phần tử xung quanh đôi khi trở nên khó lường. Nếu bạn đã từng gặp phải vấn đề biến mất các yếu tố gần đó hoặc phao nổi ra như ngón tay cái đau, đừng lo lắng nữa.

Bài đăng này bao gồm năm câu hỏi cơ bản sẽ giúp bạn trở thành một chuyên gia về các yếu tố nổi.

1. Yếu tố nào không nổi?
2. Điều gì xảy ra với một phần tử khi nó nổi?
3. Điều gì xảy ra với anh chị em của "Phao"?
4. Điều gì xảy ra với cha mẹ của một "Float"?
5. Làm thế nào để bạn xóa "nổi"?

Đối với những độc giả bổ sung cách tiếp cận TL; dr vào cuộc sống, có một bản tóm tắt gần cuối bài.

1. Yếu tố nào không nổi?

An tuyệt đối hoặc là yếu tố định vị cố định sẽ không nổi. Vì vậy, lần tới khi bạn gặp một chiếc phao không hoạt động, hãy kiểm tra xem nó có ở trong không vị trí: tuyệt đối hoặc là vị trí: cố định và áp dụng các thay đổi tương ứng.

2. Điều gì xảy ra với một phần tử khi nó nổi?

Khi một phần tử được gắn thẻ "float", nó sẽ chạy sang bên trái hoặc bên phải cho đến khi nó đập vào tường của phần tử container của nó. Ngoài ra, nó sẽ chạy cho đến khi nó đánh một yếu tố nổi khác đã va vào cùng một bức tường. Họ sẽ tiếp tục chồng chất lên nhau cho đến khi hết chỗ, và những cái mới hơn sẽ được chuyển xuống.

Yếu tố nổi cũng sẽ không vượt lên trên các yếu tố trước nó trong mã, một cái gì đó bạn cần xem xét trước khi mã hóa “Phao” sau một yếu tố bên cạnh mà bạn muốn làm nổi nó.

Dưới đây là hai điều nữa xảy ra với một phần tử nổi tùy thuộc vào loại phần tử nào đang được giữ nổi:

(1) Một phần tử nội tuyến sẽ biến thành một phần tử cấp khối khi nổi.

Đã bao giờ tự hỏi tại sao đột nhiên bạn có thể gán chiều cao và chiều rộng cho nổi khoảng? Đó là bởi vì tất cả các yếu tố khi được thả nổi sẽ nhận được giá trị khối cho mình trưng bày thuộc tính (bảng nội tuyến sẽ lấy bàn) làm cho chúng chặn các phần tử mức.

(2) Một phần tử khối có chiều rộng không xác định sẽ co lại để phù hợp với nội dung của nó khi được thả nổi.

Thông thường, khi bạn không chỉ định chiều rộng cho thành phần khối, chiều rộng của nó là 100% mặc định. Nhưng khi nổi, đó không còn là trường hợp nữa; hộp của phần tử khối sẽ co lại cho đến khi nội dung của nó vẫn hiển thị.

3. Điều gì xảy ra với Anh chị em của "Phao"?

Khi bạn quyết định thả nổi một yếu tố giữa một loạt các yếu tố, đừng lo lắng về cách nó sẽ hoạt động, hành vi của nó sẽ được dự đoán và sẽ di chuyển sang trái hoặc phải. Những gì bạn thực sự nên suy nghĩ là Các anh chị sau khi nó cư xử thế nào?.

"Phao" có những anh chị em chăm sóc và ngoan ngoãn nhất trên toàn thế giới. Họ sẽ làm mọi thứ trong khả năng của mình để chứa một yếu tố nổi.

Các yếu tố văn bản và nội tuyến sẽ đơn giản nhường đường cho "Floats" và sẽ bao quanh "Float" khi nó ở vị trí.

Các yếu tố khối sẽ tiến thêm một bước và sẽ quấn mình quanh một "phao" hào phóng, ngay cả khi điều đó có nghĩa là loại bỏ các yếu tố con của chính họ để tạo khoảng trống cho "Float".

Hãy kiểm tra điều này trong một thử nghiệm. Dưới đây là một hộp màu xanh và sau đó là một hộp màu đỏ có cùng kích thước với một số yếu tố con.

Bây giờ, hãy thả nổi hộp màu xanh và xem điều gì xảy ra với hộp màu đỏ và các con của nó.

Mọi thứ sẽ ổn khi hộp màu đỏ dừng ôm lấy hộp màu xanh và bạn có thể sử dụng tràn: ẩn.

Khi bạn thêm tràn: ẩn đến một yếu tố đã được bọc nổi, nó sẽ ngừng làm như vậy. Xem bên dưới cách hộp màu đỏ hoạt động với tràn: ẩn.

4. Điều gì xảy ra với cha mẹ của "Float"?

Cha mẹ không quan tâm nhiều đến con cái "Phao" của họ, ngoại trừ việc họ không nên đi ra khỏi ranh giới bên trái hoặc bên phải của họ.

Thông thường, một phần tử khối có chiều cao không xác định sẽ tăng chiều cao để phù hợp với các phần tử con của nó, nhưng đó không phải là trường hợp của trẻ em "Nổi". Nếu kích thước "Float" tăng, cha mẹ của nó sẽ không tăng chiều cao tương ứng. Điều này một lần nữa có thể được giải quyết bằng cách sử dụng tràn: ẩn trong cha mẹ.

5. Cách xóa "phao"?

Tôi đã đề cập đến bằng cách sử dụng tràn: ẩn để làm cho cha mẹ có chiều cao phù hợp với một đứa trẻ nổi trong khi tạo không gian phù hợp cho các yếu tố khác sau "Phao" và ngăn anh chị em bọc "Phao.

Và đó là cách bạn tạo ra một yếu tố sống gần "Phao" mà không thỏa hiệp.

Có một phương pháp khác mà các phần tử sẽ không ở bất cứ nơi nào gần anh chị em "Phao" của chúng. Bằng cách sử dụng thông thoáng thuộc tính bạn có thể làm cho một phần tử không bị ở gần "Float".

rõ ràng: trái; rõ ràng: đúng; rõ ràng: cả hai; 

trái giá trị xóa tất cả "Nổi" ở bên trái của phần tử và ngược lại cho đúng, và ở cả hai phía cho cả hai. Điều này thông thoáng thuộc tính có thể được sử dụng trên một anh chị em, div trống hoặc trên phần tử giả theo sự thuận tiện của bạn.

Tóm lược

1. Các yếu tố tuyệt đối / cố định sẽ không nổi.
2. Một "Float" không đi trên phần tử trước nó trong mã.
3. Nếu không có đủ không gian trong container, "Float" sẽ bị đẩy xuống.
4. Tất cả "Phao" được tạo thành các phần tử cấp khối.
5. Nếu chiều rộng không được chỉ định trên "Float", nó sẽ co lại để phù hợp với nội dung.
6. Các anh chị em sau của "Float" sẽ bao quanh họ (nội tuyến & văn bản) hoặc bọc chúng (các khối).
7. Để ngăn một phần tử bọc "Float", sử dụng tràn: ẩn.
8. Cha mẹ của "Phao" sẽ không tăng chiều cao để phù hợp với phao.
9. Để làm cho cha mẹ tăng chiều cao của nó theo "Float", hãy sử dụng tràn: ẩn (hoặc tạo một anh chị em trống rỗng với thông thoáng sau đó)
10. Để ngăn phần tử ở gần bất kỳ "Float" nào, hãy sử dụng thông thoáng thuộc tính.