Phao CSS được giải thích bằng cách cưỡi một thang cuốn

Nếu bạn đã từng nhảy lên thang cuốn, thì bạn có thể nhanh chóng hiểu được phao.

của bạn gần như hoàn hảo. Bạn quyết định giới thiệu một số phao để khắc phục mối quan hệ giữa một vài yếu tố.

Điều tiếp theo bạn biết, các yếu tố mới nổi của bạn nhảy ra khỏi trật tự được lựa chọn cẩn thận của bạn và bám sát vào bên cạnh div của bạn như một nam châm. Cụm từ hành vi không có chủ ý

Cá nhân tôi đã dành hàng giờ cố gắng để hiểu đầy đủ về phao. Tôi đã đọc một bài báo và nói rằng, Oh Oh, điều này có ý nghĩa! Sau đó tôi đã trở lại mã của mình, dùng thử và không thành công. Trở lại với bản vẽ.

Tôi sẽ cố gắng hết sức để cứu bạn số phận này.

Phao tạo dòng chảy xen kẽ. Đây là phần khó hiểu nhất. Và một khi bạn giới thiệu chúng, sau đó bạn cần viết mã của mình để nó chiếm tới ba luồng: bình thường, trái và phải. Đây là một bộ quy tắc hoàn toàn mới, trái ngược với việc thao túng độ rộng của các yếu tố hoặc vị trí của chúng.

Trên thực tế, phao khá giống với động lực của việc đi thang cuốn, và tôi sẽ chỉ ra cách chúng có thể được sử dụng cùng với tài sản rõ ràng để tạo mối quan hệ rõ ràng trong các div. Bằng cách này, lần tới khi bạn cố gắng sử dụng số float trong mã của mình, bạn đã thắng được gặp bất kỳ sự ngạc nhiên nào.

Phải tôn trọng làn đường

Luồng mặc định của các phần tử giống như hình trên. Một số anh chàng đang đứng ở giữa với tay trên lan can. Anh ấy đi lang thang toàn bộ thang cuốn. Không ai có thể vượt qua anh ta. Nghi thức xã giao thang cuốn khá nghèo, thực sự.

Anh ta đang đứng đằng sau một nhóm người khác đang làm điều tương tự, vì vậy không ai có thể vượt qua họ. Không có khái niệm về làn đường hoặc sự suy yếu cơ bản của con người.

Đây là kịch bản khi bạn hoàn toàn không sử dụng phao.

Được rồi, bây giờ chúng tôi nói chuyện! Mọi người cho thấy một số mức độ nhận thức. Thích nhìn thấy điều đó.

Chúng tôi có một làn được hình thành ở bên trái và một làn khác được hình thành ở bên phải. Những người khác có thể dễ dàng di chuyển xung quanh hai người đang đứng yên và đi lên thang cuốn nhanh hơn, nếu họ muốn. Không ai ngăn chặn dòng chảy bằng cách đứng ở giữa.

Đây là kịch bản khi bạn đang sử dụng float trong div của bạn. Có một luồng trái và một luồng phải, và các phần tử không được thả nổi có thể dễ dàng lấp đầy khoảng trống không được lấy bởi các phần tử nổi.

Phao: Trái và Phải

Sử dụng phao có thể giới thiệu tối đa hai luồng mới: trái và phải.

Và điều này cho phép dòng chảy bình thường của các phần tử, những phần tử không có giá trị nổi, điền vào khoảng trống xung quanh các phần tử này.

Phao cho phép bạn tạo các mối quan hệ mới giữa các luồng.

Nếu bạn có một hàng người đứng giữa thang máy, bạn sẽ có những lựa chọn hạn chế cho các cấu trúc mới. Nhưng khi bạn có một cột bên trái và bên phải, đột nhiên bạn có thể chỉ định rằng một số người nhất định đứng bên phải, những người khác ở bên trái và một nhóm khác có thể điền vào các khoảng trống.

Điều này cho phép bạn tạo mã dễ đọc và dễ hiểu hơn, bởi vì thuộc tính float cũng đưa ra dấu hiệu về mối quan hệ yếu tố với các yếu tố xung quanh.

Tài sản rõ ràng

Có một nếp nhăn nữa mà chúng ta chưa thảo luận: tài sản rõ ràng. Rõ ràng rõ ràng cho phép các phần tử chỉ định nơi chúng sẽ được căn chỉnh so với các phần tử nổi.

Trong bức ảnh đầu tiên của phần nổi Floets, hai người đi thang cuốn đã lịch sự đứng ở hai bên của thang cuốn. Điều này cho phép người khác vượt qua họ và di chuyển tự do như họ muốn.

Hãy nói rằng thay vì có một phần tử bên trái nổi và một phần tử bên phải nổi, chúng ta thay vào đó có 3 phần tử bên trái và 1 phần tử bên phải. Ba phần tử bên trái nổi sẽ xếp chồng lên nhau thành một hàng bên trái nếu chúng ta cũng cung cấp cho chúng phần rõ ràng: bên trái. Nhưng nếu chúng được sắp xếp theo chiều ngang với phần tử bên phải nổi, điều đó có thể khiến cho các phần tử thông thường vượt qua:

Rõ ràng: bên trái nói với mỗi người trôi nổi bên trái rằng họ nên căn chỉnh phía sau phần tử đầu tiên được thả nổi bên trái. Tùy thuộc vào kích thước của hai người dưới cùng, có thể khó khăn cho bất kỳ yếu tố bình thường nào có thể vượt qua và chiếm không gian trên cùng bên phải. Vì vậy, ngay cả thực hành thang cuốn tốt vẫn có thể dẫn đến tắc nghẽn.

Một trong những cách sử dụng thường xuyên nhất của tài sản rõ ràng là rõ ràng: cả hai. Điều này cho phép bạn đặt lại luồng của các phần tử, trái ngược với việc tiếp tục duy trì luồng phải, trái và luồng bình thường. Nó giống như anh chàng trên thang cuốn, người chiếm toàn bộ không gian vì anh ta mang theo vali.

Với rõ ràng là: cả hai đều có vấn đề, đó là vấn đề mà một anh chàng đang đứng trong chiếc vali của mình. Nó không quan trọng vấn đề người đứng bên trái hoặc bên phải anh ta. Anh ấy vẫn chặn toàn bộ thang cuốn. Những người tiếp tục theo đuổi anh ta sẽ cần bắt đầu một luồng yếu tố mới, có thể bao gồm bất kỳ luồng nào trong ba luồng: trái, phải hoặc bình thường.

Anh ta đã thoát khỏi hệ thống ba luồng và thiết lập lại các quy tắc. Xấu cho những người muốn chạy lên thang cuốn? Chắc chắn rồi. Nhưng nó rất tốt nếu bạn muốn ngăn chặn bất cứ ai đi qua.

Lưu ý rằng điều này khác với một quý ông lúc ban đầu đứng ở giữa thang cuốn, đằng sau một hàng người đang làm điều tương tự. Đó là một hệ thống một dòng. Xóa sạch: cả hai đều thừa nhận rằng có thể có tới ba luồng và chặn lối đi của bất kỳ yếu tố nào tiếp theo.

Nếu bạn thích bài đăng này, bạn cũng có thể thích các giải thích khác của tôi về các chủ đề CSS và JavaScript đầy thách thức, chẳng hạn như định vị, Model-View-Controller và gọi lại.

Và nếu bạn nghĩ rằng điều này có thể giúp đỡ những người khác ở vị trí tương tự như bạn, hãy cho nó một trái tim khác!

Bài đăng này ban đầu xuất hiện trên blog CodeAnalogies.