Float Là Gì? Cách Sử Dụng Trong CSS - W3seo

Rate this post

Tóm tắt nội dung

Toggle

• Float trong CSS là gì?
• Float được sử dụng để làm gì?
  • Clearing Float
  • Nhược điểm Float
  • Kỹ thuật Clearing float
• Sự cố với Floats
• Giải pháp thay thế

Float trong CSS là gì?

Float trong CSS là một thuộc tính để định dạng phẩn tử trong html, nó có thể sử dụng để chuyển một element sang bên trái(left), phải(right), center(giữa) của các thành phần xung quanh nó. Thuộc tính này sử dụng trong quá trình thiết kế layout và bố cục trang web.

Float là một thuộc tính định vị CSS. Để hiểu được mục đích và nguồn gốc của nó, 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à “wrap text”. Đây là một ví dụ về điều đó.

Hướng dẫn khác:

1. Hướng dẫn Grid trong CSS
2. CSS :: before và :: after trong CSS
3. CSS Transform và Transitions
4. Box-sizing trong CSS
5. Thuộc tính Padding trong CSS
6. Flexbox trong CSS
7. Các loại hiệu ứng hover CSS đẹp nhất
8. Sử dụng CSS để hide Scrollbar
9. Thuộc tính Box shadow trong CSS
10. Truy vấn @Media trong CSS

Trong các chương trình bố cục trang, các hộp giữ văn bản có thể được yêu cầu là tôn trọng phần wrap text hoặc bỏ qua nó. Bỏ qua dòng wrap text sẽ cho phép các từ hiển thị 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 float CSS được áp dụng cho chúng cũng giống như các hình ảnh trong bố cục in nơi văn bản hiển thị 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ị absolute. Các phần tử trang được định vị absolute 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 wrap text. Các phần tử trang được định vị absolute 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.

Đặt float trên một phần tử bằng CSS sẽ xảy ra như sau:

#sidebar { float: right; }

Có bốn giá trị hợp lệ cho thuộc tính float. Các phần tử float trái và phải tương ứng với các hướng đó. None (mặc định) đảm bảo phần tử sẽ không float và Inherit sẽ giả định giá trị float từ phần tử mẹ của phần tử đó.

Float được sử dụng để làm gì?

Ngoài ví dụ đơn giản về việc wrap text xung quanh hình ảnh, float có thể được sử dụng để tạo toàn bộ bố cục web.

Mặc dù float vẫn có thể được sử dụng để bố trí, nhưng ngày nay, chúng ta có các công cụ mạnh hơn nhiều để tạo bố cục trên các trang web. Cụ thể là Flexbox và Grid. Floats vẫn hữu ích để biết về chúng vì chúng có một số khả năng hoàn toàn độc đáo đối với chúng, tất cả được đề cập trong bài viết này.

Float 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 float cho hình ảnh đại diện nhỏ 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:

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ị absolute trên hình đại diện. Làm theo cách này, văn bản sẽ không bị ảnh hưởng bởi hình đại diện và không thể chỉnh sửa lại khi thay đổi kích thước.

Clearing Float

Công dụng Float đã rõ ràng. Một phần tử có thuộc tính rõ ràng được đặt trên nó sẽ không di chuyển lên liền kề với 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 có thể làm tốt hơn lời nói.

Trong ví dụ trên, thanh bên được float sang bên phải và ngắn hơn vùng nội dung chính. Sau đó, footer được yêu cầu phải 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, có thể xóa phần chân trang để đảm bảo phần chân trang 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ệ. Both đều được sử dụng phổ biến nhất, loại bỏ các Float đến từ một trong hai hướng. Left và Right chỉ có thể được sử dụng để xóa Float từ một hướng tương ứng. None gì là mặc định, thường là không cần thiết trừ khi xóa một giá trị rõ ràng khỏi một tầng. Inherit sẽ là thứ năm, nhưng lạ là không được hỗ trợ trong Internet Explorer. Chỉ xóa Float bên trái hoặc bên phải, mặc dù ít phổ biến hơn trong tự nhiên, nhưng chắc chắn có công dụng của nó.

Nhược điểm Float

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 phần tử cha mẹ này không chứa gì ngoài các phần tử float, thì chiều cao của nó thực sự sẽ giảm xuống không còn gì cả. Điều này không phải lúc nào cũng rõ ràng nếu phần tử cha không có bất kỳ thông tin cơ bản đáng chú ý nào về mặt hình ảnh, nhưng điều quan trọng là bạn cần lưu ý.

Có vẻ như phản trực giác như sụp đổ, thì 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ử float, chúng tôi 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 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 bằng cách xóa Float sau khi các phần tử Float trong container.

Kỹ thuật Clearing float

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 phương pháp rõ ràng: both. Đ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ó trở nê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 phải có nhiều công cụ xóa float hơn trong công cụ của bạn.

1. Phương pháp Div rỗng, theo nghĩa đen, là một div rỗng. <div style = “clear: both;”> </div> Đôi khi bạn sẽ thấy một phần tử <br> hoặc một số phần tử ngẫu nhiên khác được sử dụng, nhưng div là phổ biến nhất vì nó không có kiểu mặc định của trình duyệt, không có bất kỳ chức năng đặc biệt nào và không có khả năng được tạo kiểu chung với CSS. Phương pháp này bị khinh miệt bởi những người theo chủ nghĩa thuần túy ngữ nghĩa vì sự hiện diện của nó không có ý nghĩa ngữ cảnh nào đối với trang và hoàn toàn ở đó để trình bày. Tất nhiên, theo nghĩa chặt chẽ nhất, họ đúng, nhưng nó sẽ hoàn thành công việc đúng và không gây hại cho bất kỳ ai.

2. Phương pháp Overflow dựa vào việc đặt thuộc tính CSS Overflow trên một phần tử mẹ. Nếu thuộc tính này được đặt thành auto hoặc hidden trên phần tử mẹ, thì thuộc tính chính sẽ mở rộng để chứa các Float, 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 các yếu tố bổ sung. Tuy nhiên, nếu bạn thấy mình thêm một div mới chỉ để áp dụng điều này, nó cũng không có ngữ nghĩa như phương thức div rỗng và ít thích ứng hơn. Cũng xin lưu ý rằng thuộc tính tràn không dành riêng cho việc xóa số liệu thả nổi. 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.

3. Phương pháp Xóa dễ dàng sử dụng một bộ chọn giả CSS thông minh (: after) để xóa các float. Thay vì đặt phần bổ sung 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ì cần phải sử dụng mã bổ sung để phù hợp với các trình duyệt cũ 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 khối có nhiều kiểu 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 sắc thay đổi. Chúng tôi có thể sử dụng phương pháp xóa overflow hoặc xóa dễ dàng nếu mỗi nhóm màu có một 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 div bao không tồn tại trước đó 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

Float thường bị đánh bại vì mong manh. Phần lớn sự mong manh này đến từ IE 6 và hàng loạt lỗi liên quan đến float mà nó mắc phải. Khi ngày càng có nhiều nhà thiết kế bỏ hỗ trợ cho IE 6, bạn có thể không quan tâm, nhưng đối với những người quan tâm ở đây thì đây là một bản tóm tắt nhanh chóng.

Đẩ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. IE sẽ mở rộng Float để chứa hình ảnh, thường ảnh hưởng đáng kể đế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.

• Pushdown: Đảm bảo rằng bạn không có bất kỳ hình ảnh nào làm được điều này, hãy sử dụng tràn: ẩn để cắt bỏ phần thừa.
• Double Margin Bug – 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 hiển thị: nội tuyến trên float và đừng lo lắng nó sẽ vẫn là một phần tử cấp khối.
• 3px Jog là khi văn bản ở bên cạnh phần tử float bị đá đi 3px một cách bí ẩn giống như một trường lực kỳ lạ xung quanh float. 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, Bottom Margin Bug là khi nếu đối tượng cha của 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 gốc thay thế.

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. Định vị absolute Faux, đây là một kỹ thuật rất thú vị, theo nhiều cách kết hợp tính linh hoạt của Float với sức mạnh của định vị absolute. CSS3 có Mô-đun Bố cục Mẫu, khi được áp dụng rộng rãi, sẽ chứng tỏ là kỹ thuật bố cục trang được lựa chọn.