Các floatbất động sản trong CSS được sử dụng cho việc định vị và bố trí trên các trang web.
.module ( float: left; )Giá trị
none: phần tử không float. Đây là giá trị ban đầu.left: làm nổi phần tử ở bên trái vùng chứa của nó.right: làm nổi phần tử ở bên phải vùng chứa của nó.inherit: phần tử kế thừa hướng float của phần tử cha của nó.
display: block;
Float có nghĩa là gì?
Để hiểu rõ mục đích và nguồn gốc của float, chúng ta có thể xem xét thiết kế in ấn. Trong bố cục in, hình ảnh có thể được đặt vào trang sao cho văn bản bao quanh chúng khi cần thiết. Điều này thường được gọi là "bọc văn bản". Đây là một ví dụ về điều đó.
Trong các chương trình bố cục trang, các hộp giữ văn bản có thể được cho là tôn trọng phần bọc văn bản hoặc bỏ qua nó. Bỏ qua dòng chữ sẽ cho phép các từ chảy ngay trên hình ảnh như thể nó thậm chí không có ở đó. Đây là sự khác biệt giữa hình ảnh đó có phải là một phần của luồng trang (hoặc không). Thiết kế web rất giống nhau.
Trong thiết kế web, các phần tử trang có thuộc tính CSS floatđược áp dụng cho chúng giống như các hình ảnh trong bố cục in nơi văn bản chảy xung quanh chúng. Các phần tử nổi vẫn là một phần của dòng chảy của trang web. Điều này khác biệt rõ ràng so với các phần tử trang sử dụng định vị tuyệt đối. Các phần tử trang được định vị tuyệt đối sẽ bị xóa khỏi luồng của trang web, giống như khi hộp văn bản trong bố cục in được yêu cầu bỏ qua phần bọc trang. Các phần tử trang được định vị tuyệt đối sẽ không ảnh hưởng đến vị trí của các phần tử khác, và các phần tử khác sẽ không ảnh hưởng đến chúng, cho dù chúng có chạm vào nhau hay không.
Bản giới thiệu
Bản trình diễn này hiển thị một bài báo có hai hình ảnh: một hình ảnh được đặt thành float: leftvà một hình ảnh được đặt thành float: right. Nhấn nút “chuyển đổi phao” để bật và tắt phao.
Xem Ví dụ về Pen Float bằng CSS-Tricks (@ css-trick) trên CodePen.
Phao cho bố cục
Ngoài ví dụ đơn giản về việc gói văn bản xung quanh hình ảnh, float có thể được sử dụng để tạo toàn bộ bố cục web .
Phao nổi cũng hữu ích cho việc bố trí trong các trường hợp nhỏ hơn. Lấy ví dụ về khu vực nhỏ này của một trang web. Nếu chúng tôi sử dụng floathình ảnh đại diện của mình, khi hình ảnh đó thay đổi kích thước, văn bản trong hộp sẽ điều chỉnh lại để phù hợp với nó:
Bố cục tương tự này có thể được thực hiện bằng cách sử dụng định vị tương đối trên vùng chứa và định vị tuyệt đối trên hình đại diện. Nhưng, khi nó được thực hiện theo cách đó, văn bản sẽ không bị ảnh hưởng bởi hình đại diện và sẽ không thể chỉnh sửa lại khi thay đổi kích thước.
Bản giới thiệu
Bản trình diễn này hiển thị một hình đại diện có float: leftáp dụng. Nhấn nút “chuyển đổi kích thước hình ảnh” để xem phiên bản rộng hơn của hình ảnh đại diện. Lưu ý rằng văn bản sẽ chiếu lại để phù hợp với hình ảnh thay vì chạy trên hình ảnh.
Xem Bản trình diễn Pen Float của CSS-Tricks (@ css-trick) trên CodePen.
Xóa phao
Tài sản của chị Float là clear. Một phần tử có thuộc cleartính được đặt trên nó sẽ không di chuyển lên bên cạnh float như float mong muốn, nhưng sẽ tự di chuyển xuống dưới float. Một lần nữa, một minh họa hữu ích hơn lời nói:
Trong ví dụ trên, thanh bên được thả nổi sang bên phải và ngắn hơn vùng nội dung chính. Sau đó, footer được yêu cầu nhảy lên không gian có sẵn đó theo yêu cầu của float. Để khắc phục sự cố này, chân trang có thể được xóa để đảm bảo nó nằm bên dưới cả hai cột nổi.
#footer ( clear: both; )Clear cũng có bốn giá trị hợp lệ. Giá trị bothđược sử dụng phổ biến nhất, giá trị này sẽ xóa các phao nổi đến từ một trong hai hướng. Các giá trị leftvà rightcó thể được sử dụng để chỉ xóa float từ một hướng tương ứng. Giá trị ban đầu là none, thường là không cần thiết trừ khi nó được sử dụng để xóa rõ ràng một cleargiá trị đã được đặt. Giá trị inheritlàm cho phần tử kế thừa cleargiá trị gốc của nó. Thật kỳ lạ, Internet Explorer không hỗ trợ giá trị này cho đến IE8.
Chỉ xóa lefthoặc rightphao, mặc dù ít được thấy trong tự nhiên, nhưng chắc chắn có công dụng của nó.
Sự sụp đổ vĩ đại
Một trong những điều khó hiểu hơn khi làm việc với float là cách chúng có thể ảnh hưởng đến phần tử chứa chúng (phần tử “cha” của chúng). Nếu một phần tử mẹ không chứa gì ngoài các phần tử nổi, chiều cao của nó sẽ giảm xuống không có gì. Điều này không phải lúc nào cũng rõ ràng nếu cha mẹ không chứa bất kỳ nền tảng trực quan nào, nhưng điều quan trọng là phải biết.
Có vẻ trái ngược với trực giác như sụp đổ, giải pháp thay thế còn tệ hơn. Hãy xem xét tình huống này:
Nếu phần tử khối ở trên cùng được tự động mở rộng để chứa phần tử nổi, chúng ta sẽ có khoảng cách ngắt quãng không tự nhiên trong luồng văn bản giữa các đoạn văn mà không có cách nào thực tế để sửa chữa nó. Nếu đúng như vậy, các nhà thiết kế của chúng tôi sẽ phàn nàn nhiều hơn về hành vi này hơn là chúng tôi làm về việc sụp đổ.
Việc thu gọn hầu như luôn cần được xử lý để ngăn chặn các vấn đề về bố cục lạ và trình duyệt chéo. Chúng tôi khắc phục nó bằng cách xóa phao sau khi các phần tử nổi trong thùng chứa nhưng trước khi đóng thùng chứa.
Kỹ thuật xóa số nổi
Nếu bạn đang ở trong tình huống mà bạn luôn biết yếu tố thành công sẽ là gì, bạn có thể áp dụng clear: both;giá trị cho yếu tố đó và tiếp tục hoạt động kinh doanh của mình. Điều này là lý tưởng vì nó không yêu cầu hack ưa thích và không có yếu tố bổ sung nào làm cho nó hoàn hảo về ngữ nghĩa. Tất nhiên, mọi thứ thường không diễn ra theo cách đó và chúng ta cần có nhiều công cụ xóa float hơn trong hộp công cụ của mình.
- Phương thức Div rỗng , theo nghĩa đen, là một div rỗng.
- Phương thức Overflow dựa vào việc đặt thuộc tính
overflowCSS trên một phần tử mẹ. Nếu thuộc tính này được đặt thànhautohoặchiddentrên phần tử mẹ, thì phần tử mẹ sẽ mở rộng để chứa các phao, xóa nó một cách hiệu quả cho các phần tử kế tiếp. Phương thức này có thể đẹp về mặt ngữ nghĩa vì nó có thể không yêu cầu thêm phần tử. Tuy nhiên, nếu bạn thấy mình thêm một phương thức mớidivchỉ để áp dụng điều này, thì nó cũng phi ngữ nghĩa nhưdivphương thức trống rỗng và ít thích ứng hơn. Cũng nên nhớ rằng thuộc tính tràn không dành riêng cho việc xóa các phao. Hãy cẩn thận để không ẩn nội dung hoặc kích hoạt các thanh cuộn không mong muốn. - Phương pháp Xóa Dễ dàng (còn được gọi là “clearfix”) sử dụng một bộ chọn giả CSS thông minh (
:after) để xóa các phần nổi. Thay vì đặt phần tràn trên cha mẹ, bạn áp dụng một lớp bổ sung như “clearfix” cho nó. Sau đó, áp dụng CSS này:.clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )Điều này sẽ áp dụng một chút nội dung nhỏ, ẩn khỏi chế độ xem, sau khi phần tử mẹ xóa float. Đây không phải là toàn bộ câu chuyện, vì mã bổ sung cần được sử dụng để chứa các trình duyệt cũ hơn. Lưu ý: Cũng xem đoạn mã này theo dõi những thông tin mới nhất và hay nhất trong các bản clearfix, bao gồm cả “micro clearfix” mới hơn.
Các tình huống khác nhau yêu cầu các phương pháp bù trừ float khác nhau. Lấy ví dụ một lưới các khối, mỗi loại khác nhau.
Để kết nối các khối tương tự một cách trực quan hơn, chúng tôi muốn bắt đầu một hàng mới theo ý muốn, trong trường hợp này là khi màu thay đổi. Chúng tôi có thể sử dụng phương pháp xóa tràn hoặc xóa dễ dàng nếu mỗi nhóm màu có phần tử mẹ. Hoặc, chúng tôi sử dụng phương thức div trống ở giữa mỗi nhóm. Ba gói div trước đây không tồn tại hoặc ba sau div không tồn tại trước đó. Tôi sẽ để bạn quyết định cái nào tốt hơn.
Sự cố với Floats
Phao thường bị đánh bại vì mong manh. Phần lớn sự mong manh này đến từ các lỗi trong IE6 và IE7. Khi những trình duyệt đó dần trở lại quá khứ, những lỗi này sẽ dần dần biến mất cùng với chúng. Tuy nhiên, bạn vẫn nên hiểu chúng nếu bạn cần gỡ lỗi “OldIE”.
- Đẩy xuống là một triệu chứng của một phần tử bên trong một mục nổi rộng hơn chính phần tử nổi (thường là một hình ảnh). Hầu hết các trình duyệt sẽ hiển thị hình ảnh bên ngoài float, nhưng không có phần nhô ra ngoài ảnh hưởng đến bố cục khác. Các phiên bản IE cũ đã mở rộng phần nổi để chứa hình ảnh, thường ảnh hưởng lớn đến bố cục. Một ví dụ phổ biến là một hình ảnh nhô ra khỏi nội dung chính đẩy thanh bên xuống bên dưới.
Khắc phục nhanh: Đảm bảo rằng bạn không có bất kỳ hình ảnh nào làm điều này, hãy sử dụng
overflow: hidden;để cắt bỏ phần thừa. - Lỗi ký quỹ kép - Một điều khác cần nhớ khi xử lý IE 6 là nếu bạn áp dụng ký quỹ theo cùng hướng với số float, nó sẽ tăng gấp đôi ký quỹ. Khắc phục nhanh: đặt
display: inlinetrên float và đừng lo lắng nó sẽ vẫn là một phần tử cấp khối. - Các 3px Jog là khi văn bản đó là bên cạnh một yếu tố nổi được một cách bí ẩn đuổi đi bởi 3px như một ForceField lạ xung quanh phao. Khắc phục nhanh: đặt chiều rộng hoặc chiều cao trên văn bản bị ảnh hưởng.
- Trong IE 7, Lỗi Lề dưới cùng là khi nếu cha mẹ float đã đưa các con vào bên trong nó, thì lề dưới của các con đó sẽ bị cha mẹ bỏ qua. Khắc phục nhanh: sử dụng đệm dưới cùng trên trang chính.
Giải pháp thay thế
Nếu bạn cần văn bản bao quanh hình ảnh, thực sự không có bất kỳ lựa chọn thay thế nào cho float. Nói về điều này, hãy xem kỹ thuật khá thông minh này để gói văn bản xung quanh các hình dạng bất thường. Nhưng đối với bố cục trang, chắc chắn có sự lựa chọn. Eric Sol có một bài báo trên A List Apart, Faux Absolute Positioning, mô tả một kỹ thuật rất thú vị mà theo nhiều cách, kết hợp tính linh hoạt của phao với sức mạnh của định vị tuyệt đối.
CSS3 xử lý bố cục trang theo một số cách:
- Flexbox
- Bố cục nhiều cột
- Bố cục lưới
Các phao được định vị tuyệt đối (ví dụ: bạn hoàn toàn đặt vị trí như bình thường, nhưng phần tử vẫn có thể ảnh hưởng đến các phần tử khác, chẳng hạn như có văn bản bọc xung quanh nó) đã được thảo luận, nhưng tôi nghĩ ý tưởng đã bị gác lại do có sự tương đồng với các ý tưởng bố cục mạnh mẽ hơn khác.
Video
Tôi đã thực hiện một video truyền hình một thời gian giải thích nhiều khái niệm float.
Có liên quan
clearposition
Thêm thông tin
floattrong thông số kỹ thuật W3Cfloattại MDN
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Tất cả | Tất cả | Tất cả | Tất cả | Tất cả | Tất cả | Tất cả |