L布局 CSS - Đ浮动 và Xóa

L布局 CSS - Đ浮动 và Xóa

CSS float Thuộc tính quy định cách element sẽ float.

CSS clear Thuộc tính quy định những element nào có thể float bên cạnh element cần làm sạch và ở bên nào.

Thuộc tính float

float Thuộc tính này được sử dụng để định vị và định dạng nội dung, ví dụ như để hình ảnh float sang trái đến văn bản trong khung chứa.

float Thuộc tính có thể thiết lập một trong các giá trị sau:

  • left - Element sẽ float sang bên trái của khung chứa
  • right - Element sẽ float ở bên phải của khung chứa
  • none - Element sẽ không float (sẽ hiển thị ở vị trí mà văn bản vừa xuất hiện). Giá trị mặc định.
  • inherit - Element kế thừa giá trị float của cha

Cách sử dụng đơn giản nhất là:float Thuộc tính này có thể thực hiện được hiệu ứng bao quanh hình ảnh bởi văn bản (trên báo in).

Ví dụ - float: right;

Ví dụ sau đây chỉ định hình ảnh nên di chuyển float sang phải trong văn bản

Dâu tây

Giáo trình công nghệ Web hàng đầu - Hoàn toàn miễn phí. Tại CodeW3C.com, bạn có thể tìm thấy tất cả các giáo trình xây dựng trang web mà bạn cần. Từ cơ bản HTML đến CSS, cho đến nâng cao XML, SQL, JS, PHP.

Tài liệu tham khảo của chúng tôi bao gồm tất cả các khía cạnh của công nghệ trang web. Trong đó có các công nghệ tiêu chuẩn W3C: HTML, CSS, XML. Ngoài ra còn có các công nghệ khác như JavaScript, PHP, SQL.

Tại CodeW3C.com, chúng tôi cung cấp hàng ngàn mẫu. Bằng cách sử dụng trình chỉnh sửa trực tuyến của chúng tôi, bạn có thể chỉnh sửa các ví dụ này và thử nghiệm mã.

Mẫu

img {
  float: right;
{}

Thử ngay

Ví dụ - float: left;

Ví dụ sau đây chỉ định hình ảnh nên xuất hiện trong văn bảnSang tráiĐ浮动:

Dâu tây

Giáo trình công nghệ Web hàng đầu - Hoàn toàn miễn phí. Tại CodeW3C.com, bạn có thể tìm thấy tất cả các giáo trình xây dựng trang web mà bạn cần. Từ cơ bản HTML đến CSS, cho đến nâng cao XML, SQL, JS, PHP.

Tài liệu tham khảo của chúng tôi bao gồm tất cả các khía cạnh của công nghệ trang web. Trong đó có các công nghệ tiêu chuẩn W3C: HTML, CSS, XML. Ngoài ra còn có các công nghệ khác như JavaScript, PHP, SQL.

Tại CodeW3C.com, chúng tôi cung cấp hàng ngàn mẫu. Bằng cách sử dụng trình chỉnh sửa trực tuyến của chúng tôi, bạn có thể chỉnh sửa các ví dụ này và thử nghiệm mã.

Mẫu

img {
  float: left;
{}

Thử ngay

Ví dụ - Không float

Trong ví dụ sau, hình ảnh sẽ hiển thị ở vị trí mà văn bản vừa xuất hiện (float: none;):

Dâu tây Giáo trình công nghệ Web hàng đầu - Hoàn toàn miễn phí. Tại CodeW3C.com, bạn có thể tìm thấy tất cả các giáo trình xây dựng trang web mà bạn cần. Từ cơ bản HTML đến CSS, cho đến nâng cao XML, SQL, JS, PHP. Tài liệu tham khảo của chúng tôi bao gồm tất cả các khía cạnh của công nghệ trang web. Trong đó có các công nghệ tiêu chuẩn W3C: HTML, CSS, XML. Ngoài ra còn có các công nghệ khác như JavaScript, PHP, SQL. Tại CodeW3C.com, chúng tôi cung cấp hàng ngàn mẫu. Bằng cách sử dụng trình chỉnh sửa trực tuyến của chúng tôi, bạn có thể chỉnh sửa các ví dụ này và thử nghiệm mã.

Mẫu

img {
  float: none;
{}

Thử ngay

Đọc thêm

Sách ngoại khóa:Đ浮动 CSS