Khi bạn đang thiết kế một trang web, bạn có thể quyết định rằng một phần tử cụ thể sẽ xuất hiện ở một vị trí nhất định trên trang. Ví dụ:bạn có thể muốn một hộp chứa hình ảnh xuất hiện ở bên phải của trang.
Trong CSS, thuộc tính float được sử dụng để chỉ định cách định vị một phần tử. Dấu nổi có thể được sử dụng để định vị một phần tử ở bên trái hoặc bên phải của trang web.
Hướng dẫn này sẽ thảo luận, có tham chiếu đến các ví dụ, cách sử dụng thuộc tính float của CSS để định vị các phần tử trên trang web. Khi đọc xong hướng dẫn này, bạn sẽ trở thành chuyên gia về các phần tử nổi trên trang web bằng cách sử dụng CSS.
Thuộc tính nổi CSS
Thuộc tính float có thể được sử dụng để định vị một phần tử ở bên trái hoặc bên phải của trang web. Ví dụ:float có thể được sử dụng để định vị hình ảnh ở bên phải văn bản trong một hộp trên trang web.
Thuộc tính float chỉ áp dụng cho các phần tử tạo hộp và không được định vị tuyệt đối trên trang web. Phần tử được định vị tuyệt đối là phần tử web được định vị so với phần tử mẹ đầu tiên có vị trí khác với vị trí tĩnh.
Bốn giá trị phổ biến nhất được sử dụng với thuộc tính float là:
- left (thả nổi một phần tử ở bên trái vùng chứa)
- right (thả nổi một phần tử ở bên phải vùng chứa)
- none (không có float nào được áp dụng cho một phần tử)
- inherit (phần tử được float bằng cách sử dụng thuộc tính float được áp dụng cho vùng chứa mẹ của nó).
Cách sử dụng phổ biến nhất của thuộc tính float là bọc văn bản xung quanh hình ảnh trong CSS.
Ví dụ về CSS Float
Giả sử chúng tôi đang thiết kế một trang web cho Stargazer Blazers tại địa phương xã hội ngắm sao. Câu lạc bộ muốn có một trang web phác thảo lịch sử của tổ chức của họ. Trang web này phải có một mô tả ngắn gọn về câu lạc bộ, cũng như hình ảnh của các ngôi sao được đặt ở bên trái của trang.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Chúng tôi có thể sử dụng thuộc tính float để tạo trang web này. Đây là mã cơ bản mà chúng tôi sẽ sử dụng cho trang web của mình mà không áp dụng bất kỳ số float nào:
index.html <div> <p><img src="https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1357&q=80" height="200" width="200" /> The Stargazer Blazers society, founded in 2017, is dedicated to viewing the stars in San Francisco, CA. The society was created after a meeting of two passionate stargazers in the Bay Area, Jeff Holmes and Paula Ingleson, who were looking to find other people with whom to discuss their passion. Today, our organization has over 200 members in the Bay Area, and meets monthly to gaze at the stars and discuss our members' discoveries. </p> </div>
Mã của chúng tôi trả về:
Trong ví dụ này, hình ảnh của chúng tôi xuất hiện trước văn bản của chúng tôi và về tổng thể trang không được đẹp mắt về mặt thẩm mỹ. Tuy nhiên, bằng cách sử dụng thuộc tính float, chúng ta có thể đặt hình ảnh của mình bên cạnh văn bản.
Đây là mã chúng tôi sẽ sử dụng để đặt hình ảnh của mình ở bên phải văn bản (đó là những gì mà hội ngắm sao yêu cầu):
styles.css
img {
float: right;
} Mã của chúng tôi trả về:
Hãy chia nhỏ mã của chúng ta. Đầu tiên, chúng tôi xác định một
để tạo nội dung văn bản, bao gồm mô tả về lịch sử của câu lạc bộ Stargazer Blazers. Bên trong thẻ
của chúng tôi, chúng tôi cũng bao gồm hình ảnh các ngôi sao, có kích thước 200 × 200.
Trong tệp styles.css của chúng tôi, bao gồm mã kiểu cho trang web của chúng tôi, chúng tôi đã sử dụng float:right; thuộc tính để làm nổi hình ảnh của chúng tôi ở bên phải của văn bản. Như bạn có thể thấy trong ví dụ trên, hình ảnh của chúng tôi được đặt ở bên phải văn bản của chúng tôi. Theo mặc định, hình ảnh sẽ xuất hiện trước văn bản của chúng tôi.
Bây giờ, giả sử câu lạc bộ ngắm sao đã yêu cầu chúng tôi đặt hình ảnh ở bên trái văn bản. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
styles.css
img {
float: left;
margin-right: 20px;
} Mã của chúng tôi trả về:
Trong ví dụ này, chúng tôi đã làm nổi hình ảnh của chúng tôi ở bên trái văn bản của chúng tôi. Chúng tôi cũng chỉ định margin-right:20px; thuộc tính này, tạo ra một khoảng trống giữa bên trái của hình ảnh và văn bản của chúng ta.
Box Grid with Float
Thuộc tính float cho phép bạn tạo các hộp nội dung xuất hiện cạnh nhau.
Giả sử hội ngắm sao muốn ba hình ảnh xuất hiện cạnh nhau, cho thấy những ngôi sao mà mọi người có thể nhìn thấy nếu họ tham gia.
Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này:
index.html <div> <img src="https://images.unsplash.com/photo-1492446190781-58ac4285911d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1294&q=80" height="200" width="200" class="image" /> <img src="https://images.unsplash.com/photo-1456154875099-97a3a56074d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" height="200" width="200" class="image" /> <img src="https://images.unsplash.com/photo-1435224668334-0f82ec57b605?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" class="image" /> </div>
styles.css
* { box-sizing: border-box };
.image {
float: left;
width: 25%;
padding: 25px;
} Mã của chúng tôi trả về:
Hãy chia nhỏ mã của chúng ta. Trong tệp HTML của chúng tôi, chúng tôi có thẻ
image . Trong tệp styles.css của chúng tôi, chúng tôi:
- Áp dụng box-sizing:border-box; phong cách cho mọi mục trong danh sách của chúng tôi, vì vậy phần đệm và đường viền của một phần tử sẽ được bao gồm trong tổng chiều rộng và chiều cao của phần tử đó. Điều này cho phép chúng tôi đặt các phần tử của mình cạnh nhau mà không có khoảng trắng mặc định.
- Sử dụng float:left; để làm cho hình ảnh của chúng ta xuất hiện song song với nhau.
- Sử dụng chiều rộng:25% để mỗi hình ảnh chiếm 25% chiều rộng của trang web.
- Sử dụng padding:25px; để tạo khoảng cách 25px giữa mỗi hình ảnh.
Kết luận
Thuộc tính float CSS được sử dụng để đặt một phần tử ở bên trái hoặc bên phải của vùng chứa của nó. Điều này cho phép văn bản và các phần tử khác bao quanh phần tử nổi.
Hướng dẫn này đã thảo luận, có tham chiếu đến các ví dụ, cách sử dụng thuộc tính float của CSS để định vị các phần tử ở bên trái và bên phải của một vùng chứa trong CSS. Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng thuộc tính float như một chuyên gia CSS!