Hiểu CSS Float
Trong bài viết này, hãy tìm hiểu cách sử dụng định vị float CSS, cũng như một số cạm bẫy khi sử dụng nó.
Những người mới làm quen với CSS thường gặp khó khăn trong việc nắm bắt cách hoạt động của định vị float . Điều này có thể là do mọi người có xu hướng lạm dụng nó hoặc nhiều lần họ đang sử dụng một khung công tác CSS sử dụng nó quá nhiều (hãy xem bạn Bootstrap v2 👀).
Sử dụng float quá thường xuyên có thể làm cho bố cục trang không thể đoán trước và dễ bị hỏng. Sau khi dạy cho nhiều người cách sử dụng float , tôi đã đưa ra 3 luật / hướng dẫn để dễ dàng hiểu về float .
3 luật
- Luật số 1 Sử dụng
floatcho mục đích dự định của nó - Luật số 2 Cha mẹ chứa các phần tử
floatsẽ bị thu gọn - Luật số 3 Sử dụng
clearkết hợp vớifloat
Luật số 1: Sử dụng Float cho Mục đích Dự định của nó
Thiết kế web được truyền cảm hứng sâu sắc từ các ngành thiết kế in ấn, và float là sự tôn kính đối với những nguồn root này khi một nhà thiết kế in ấn cần phải “kéo” một yếu tố hình ảnh sang một bên trong khi cho phép các nội dung khác tự do chảy xung quanh nó.
Ngày nay, đây vẫn là một mẫu thiết kế cho các trang web và dù bạn tin hay không thì không có bất kỳ cách giải quyết CSS nào để hoàn thành những gì float làm.
<p> <img class="bitey-img" src="apex-predator.jpeg"/> The alligator is a crocodilian in the genus Alligator of the family Alligatoridae. The two living species are... </p> .bitey-img { float: right; } Điều này đã được thực hiện bằng cách sử dụng float: right; . Cửa sổ trình duyệt có thể được thay đổi kích thước và văn bản sẽ chảy tự nhiên xung quanh hình ảnh! Bạn không thể thực hiện điều này với Flexbox, position: absolute hoặc bất kỳ giải pháp thay thế nào. Đó là một tính năng mạnh mẽ mà chỉ float có thể làm được!
Bạn cũng có thể sử dụng float: left; để ghim thứ gì đó sang phía bên kia:
Xem mã trên glitch.com
Và… đó là nó!
Đây thực sự là những cách sử dụng thực dụng duy nhất cho float . Nó được sử dụng khi bạn muốn thứ gì đó ghim một phần tử HTML sang một bên VÀ bạn muốn nội dung lấp đầy không gian trống xung quanh nó. Nếu thiếu bất kỳ tiêu chí nào trong số này, bạn sẽ phù hợp hơn bằng cách sử dụng cách tiếp cận khác (như CSS Flexbox ).
Case-in-point: Phiên bản cũ của Bootstrap v2 , được sử dụng các luật float ở khắp mọi nơi trong codebase. Ví dụ, các phần .row-fluid span :
Chắc chắn mọi người sẽ tùy chỉnh chủ đề Bootstrap của họ, và sau đó bắt đầu thấy bố cục bị phá vỡ. Nó hoàn toàn hỗn loạn! Rất may, group Bootstrap đã loại bỏ phần lớn các luật float khỏi các bản phát hành mới.
Luật số 2: Cha mẹ chứa các phần tử nổi sẽ thu gọn
Trong hình minh họa bên dưới, <div> chứa ba phần tử <div> khác có float: left; đã áp dụng. Phần tử mẹ có chiều cao được tính là 0px vì nó sẽ không mở rộng để chứa các phần tử nổi:
Điều này khá lạ nếu bạn chưa quen với CSS. <div> có chứa sẽ chỉ mở rộng cho các phần tử không được thả nổi:
Xem mã trên glitch.com
Luật số 3: Sử dụng Clear trong Liên kết với Float
Một số luật CSS bổ sung cho các luật CSS khác, chẳng hạn như font-family và font-size . Khi bạn đạt được một trong số chúng, bạn sẽ thường sử dụng cái kia. Giống như hai hạt đậu trong một quả! Tương tự đối với float và clear .
Nói chung, nếu bạn định sử dụng float bạn nên cân nhắc sử dụng clear . Hoặc bố cục của bạn có thể phá vỡ:
Dòng tiêu đề thứ 2 không được bao bọc hình ảnh. Chuyển sang cửa sổ “Xem nguồn” và thử chỉnh sửa clear: none to clear: both . Điều này khắc phục sự cố và đặt tiêu đề trên dòng riêng của nó.
Sử dụng clear sẽ làm cho các phần tử nổi của bạn có thể dự đoán được và do đó, thú vị hơn khi sử dụng! clear có thể có giá trị none (giá trị mặc định), right , left , both , inline-start hoặc inline-end .
Kết luận
Thuộc tính float có một role rất đặc biệt trong CSS. Nó làm điều gì đó mà không thuộc tính CSS nào khác có thể làm được và nếu bạn tuân theo 3 Luật này, bạn có thể tận dụng hiệu quả float trong các thiết kế của bạn .
Các tin liên quan
Giới thiệu về Bulma CSS với React2018-10-12
Media query CSS: Tham khảo và hướng dẫn nhanh
2018-06-07
Mẹo CSS: Bóng đổ nhiều màu & cắt bỏ
2018-04-02
Cách hiện đại để xử lý CSS trong React
2018-02-22
CSS-in-JS Roundup: Tạo kiểu cho các thành phần React
2017-08-21
Đặt lại CSS tối thiểu
2017-06-21
Hàm CSS color-mod
2017-01-12
CSS Grid: Holy Grail Layout
2016-12-28
Bố cục lưới CSS: Ký hiệu lặp lại
2016-12-23
Bố cục lưới CSS: Từ khóa Span
2016-12-21
