Thuộc tính FLOAT và CLEAR trong CSS

Bố cục web là một yếu tố quan trọng ảnh hưởng trực tiếp đến trải nghiệm của người dùng. Sử dụng các thuộc tính CSS hiệu quả là chìa khóa để tạo ra các bố cục đẹp và hấp dẫn. Trong bài viết này, chúng ta sẽ khám phá hai thuộc tính quan trọng: CSS Nổi và CSS Clear, giúp bạn dễ dàng tạo ra bố cục web ấn tượng.

Có thể bạn quan tâm

Thuộc tính Float trong CSS

Trôi nổi Float hoạt động như một “bàn tay vô hình” để di chuyển các thành phần sang trái hoặc phải của vùng chứa, tạo ra các cột nội dung duy nhất. Tuy nhiên, sử dụng Float cũng có nhiều lỗi tiềm ẩn có thể làm hỏng bố cục nếu không được kiểm soát đúng cách.

Bạn đang xem: Thuộc tính FLOAT và CLEAR trong CSS

Thuộc tính Float của CSS là gì?

Thuộc tính Float của CSS được sử dụng để xác định cách một phần tử HTML được căn chỉnh hoặc nổi trong một khối. Khi thuộc tính Float được áp dụng cho một phần tử, nó sẽ di chuyển sang trái hoặc phải của khối chứa nó và các phần tử khác sẽ điều chỉnh vị trí của riêng chúng dựa trên phần tử được nổi.

Cú pháp sử dụng Float như sau:

bộ chọn

{float: trái|phải|không có|thừa hưởng;}

Khi sử dụng Float, hãy lưu ý rằng các phần tử khác trong khối sẽ tự động điều chỉnh vị trí của chúng để phù hợp với phần tử Float. Điều này có thể tạo ra hiệu ứng lề và tạo ra các cấu trúc nhiều cột trong trang web. Ngoài ra, các phần tử khác có thể không nhận ra kích thước của phần tử Float, đòi hỏi các phương pháp khác để làm cho khối chứa có chiều cao phù hợp hoặc các giải pháp khác liên quan đến việc dừng Float.

Thuộc tính CSS Float có những giá trị nào?

Giá trị số thực:

bên trái: Phần tử sẽ được căn chỉnh về bên trái và các phần tử khác sẽ điều chỉnh vị trí của chúng xung quanh phần tử Float.
phải: Phần tử sẽ được căn chỉnh sang phải và các phần tử khác sẽ điều chỉnh vị trí của chúng xung quanh phần tử Float.
không có (mặc định): Phần tử sẽ không nổi và sẽ xuất hiện trong luồng chính của tài liệu.
kế thừa: Phần tử sẽ kế thừa giá trị Float từ phần tử cha của nó.

CSS Float: phải

Mã chi tiết:

hình ảnh {

float: phải

}

P {

bối cảnh: #FFFACD

}

Trong ví dụ này, hình ảnh hoa linh lan sẽ ở bên phải và văn bản sẽ bao quanh hình ảnh.

Hoa linh lan hay còn gọi là hoa lan chuông, là loài hoa nhỏ nhưng có vẻ đẹp tinh khiết và hương thơm ngọt ngào làm say đắm lòng người. Với những bông hoa hình chuông màu trắng tuyệt đẹp, mọc thành từng chùm rủ xuống, hoa linh lan mang đến cảm giác thanh thoát, dịu dàng và bình yên. Loài hoa này có nguồn gốc từ vùng ôn đới mát mẻ của Bắc bán cầu, thường nở vào mùa xuân. Hoa linh lan được yêu thích vì vẻ đẹp thanh thoát, hương thơm tinh tế và ý nghĩa đặc biệt.

Theo truyền thuyết, hoa linh lan mọc lên từ những giọt nước mắt vui mừng của Đức Mẹ Đồng Trinh Mary, vì vậy nó được coi là biểu tượng của hạnh phúc, may mắn và niềm vui. Hoa linh lan cũng tượng trưng cho tình yêu và lòng trung thành. Mọi người thường tặng hoa linh lan cho người yêu của mình để bày tỏ tình cảm chân thành và mong muốn một mối quan hệ lâu dài. Vẻ đẹp tinh khiết và hương thơm thanh lịch của hoa linh lan tượng trưng cho sự trong trắng, ngây thơ và cao quý.

Kết quả:

CSS Float: không có

Mã chi tiết:

hình ảnh {

float: không có

}

P {

bối cảnh: #FFFACD

}

Trong ví dụ này, hình ảnh hoa linh lan được đặt ở vị trí mặc định.

Xem thêm : Cách kết nối đồng hồ thông minh với điện thoại nhanh nhất

Kết quả:

Xóa Thuộc tính trong CSS

Một vấn đề thường gặp khi CSS Float không được kiểm soát đúng cách, các thành phần có thể bị xếp chồng hoặc lộn xộn trong bố cục. Clear sẽ giải cứu, ngăn các thành phần khác “chảy” xung quanh thành phần Float, đảm bảo bố cục web được hiển thị chính xác và gọn gàng. Hiểu cách Float và Clear hoạt động và kết hợp chúng một cách trơn tru sẽ giúp bạn tạo ra nhiều bố cục web khác nhau, từ các thanh bên truyền thống đến các bố cục lưới phức tạp.

Thuộc tính CSS Clear là gì?

Trong CSS, thuộc tính Clear được sử dụng để chỉ định cách các phần tử khác nên xử lý phần tử trước đó có áp dụng thuộc tính CSS Float. Khi một phần tử có thuộc tính Clear được áp dụng, nó sẽ ngăn các phần tử khác được đặt cạnh phần tử Float. Phần tử Clear sẽ được đẩy xuống dưới phần tử Float và bắt đầu trên một dòng mới. Thuộc tính Clear thường được sử dụng để đảm bảo rằng các phần tử theo sau phần tử Float không bị ảnh hưởng bởi Float và bắt đầu trên một dòng mới.

Thuộc tính CSS Clear có những giá trị nào?

Thuộc tính Clear có các giá trị sau:

none: Không có hiệu ứng đặc biệt. Phần tử không thay đổi vị trí của nó so với phần tử nổi.
left: Phần tử sẽ không nằm cạnh phần tử đã được Float ở bên trái. Nếu có phần tử đã được Float ở bên trái, phần tử sử dụng Clear: left sẽ được đẩy xuống bên dưới phần tử Float.
right: Phần tử sẽ không được đặt cạnh phần tử đã được Float ở bên phải. Nếu có phần tử đã được Float ở bên phải, phần tử sử dụng Clear: right sẽ được đẩy xuống bên dưới phần tử Float.
both: Phần tử sẽ không nằm cạnh phần tử đã Nổi bên trái hoặc bên phải. Nếu có phần tử đã Nổi bên trái hoặc bên phải, phần tử sử dụng Clear: both sẽ được đẩy xuống bên dưới phần tử Nổi.

Phân biệt giữa thuộc tính CSS Float và CSS Clear

Float và Clear là hai thuộc tính CSS thường được sử dụng để tạo bố cục web. Tuy nhiên, hai thuộc tính này có chức năng khác nhau và cần được sử dụng cẩn thận để tránh bố cục bị hỏng.

Trôi nổi: Float là một thuộc tính CSS được sử dụng để xác định cách các phần tử được xếp chồng lên nhau trong một bố cục. Khi một phần tử được đặt thành Float, nó sẽ di chuyển sang trái hoặc phải của vùng chứa của nó và các phần tử khác sẽ xếp chồng lên trên nó. Các giá trị chung cho thuộc tính Float là “left” và “right”. Do đó, Float được sử dụng để di chuyển một phần tử sang trái hoặc phải của vùng chứa của nó. Phần tử Float sẽ nằm cạnh các phần tử không phải Float khác và các phần tử khác sẽ “chảy” xung quanh phần tử Float.

Thông thoáng: Clear là một thuộc tính CSS được sử dụng để chỉ định cách xóa các phần tử Float. Khi một phần tử có thuộc tính Clear được đặt, nó sẽ thiết lập ranh giới cho các phần tử được xếp chồng lên Float. Các giá trị chung cho thuộc tính Clear là “left” (xóa Float bên trái), “right” (xóa Float bên phải) và “both” (xóa Float từ cả hai phía). Do đó, Clear được sử dụng để ngăn các phần tử khác “chảy” xung quanh phần tử Float. Nó chỉ định các phần tử nào có thể nổi bên cạnh phần tử đã xóa và ở phía nào.

Khi nào nên sử dụng Float?

Nên sử dụng phao trong các trường hợp sau:

Tạo bố cục hai cột hoặc nhiều cột: Bố cục nổi là một cách đơn giản để tạo bố cục hai cột hoặc nhiều cột mà không cần phải dùng đến bố cục lưới phức tạp.
Di chuyển một phần tử sang trái hoặc phải của vùng chứa: Float cho phép bạn di chuyển một phần tử sang trái hoặc phải của vùng chứa, giúp bạn linh hoạt hơn khi tạo bố cục.
Tạo hiệu ứng đặc biệt: Float có thể được sử dụng để tạo hiệu ứng đặc biệt, chẳng hạn như làm cho một phần tử “nổi” trên trang.

Sau đây là một số ví dụ cụ thể về thời điểm sử dụng Float:

Tạo bố cục hai cột cho blog: Bạn có thể sử dụng Float để tạo bố cục hai cột cho blog của mình, với nội dung chính ở cột bên trái và thanh bên ở cột bên phải.
Di chuyển hình ảnh sang trái hoặc phải văn bản: Bạn có thể sử dụng Float để di chuyển hình ảnh sang trái hoặc phải văn bản, giúp bạn tạo bố cục cân bằng hơn.
Tạo menu ngang: Bạn có thể sử dụng Float để tạo menu ngang với các mục menu được sắp xếp cạnh nhau.

Tuy nhiên, cần lưu ý rằng Float cũng có một số nhược điểm:

Float có thể gây ra một số vấn đề về bố cục, chẳng hạn như “hack clearfix”.
Float có thể khiến nội dung “nhảy” nếu không được sử dụng cẩn thận.
CSS Floats nên được sử dụng một cách có chọn lọc và kết hợp với các kỹ thuật bố cục khác.

Phần kết luận

Qua bài viết tổng hợp trên của tuyengiaothudo.vn, chúng ta có thể thấy thuộc tính CSS Float và CSS Clear là hai công cụ đắc lực trong CSS để layout trang web. Hiểu được cách sử dụng các thuộc tính này có thể giúp bạn tạo ra các layout phức tạp một cách dễ dàng và hiệu quả. Tuy nhiên, cần lưu ý rằng việc sử dụng Float quá nhiều có thể gây khó khăn cho việc duy trì và quản lý website. Do đó, hãy sử dụng Float một cách có chọn lọc và kết hợp với các kỹ thuật layout khác để tạo ra những website đẹp và dễ sử dụng.

XEM THÊM:

Nguồn: https://tuyengiaothudo.vn
Danh mục: Thủ thuật