CSS Float

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    7 thg 11, 2022

  • Số lượt xem

    563 lượt xem


CSS Float được sử dụng để định vị và định dạng nội dung, ví dụ: để một hình ảnh trôi sang trái với văn bản trong một container.

float Property

Thuộc tính float được sử dụng để định vị và định dạng nội dung, ví dụ: để một hình ảnh trôi sang trái với văn bản trong một container.

Thuộc tính float có thể có một trong các giá trị sau:

  • left - Phần tử nổi ở bên trái container của nó
  • right - Phần tử nổi ở bên phải container của nó
  • none - Phần tử không nổi (sẽ được hiển thị ngay tại nơi nó xuất hiện trong văn bản). Đây là giá trị mặc định
  • inherit - Phần tử kế thừa giá trị float của phần tử cha của nó

Trong cách sử dụng đơn giản nhất, thuộc tính float có thể được sử dụng để bọc văn bản xung quanh hình ảnh.

Ví dụ - float: right;

PineappleLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

img {    float: right;  }

 

Ví dụ - float: left;

PineappleLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

img {    float: left;  }

 

Ví dụ - float: none;

PineappleLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

img {    float: none;  }

 

clear Property

Khi chúng ta sử dụng thuộc tính float và chúng ta muốn element tiếp theo bên dưới (không phải ở bên phải hoặc bên trái), chúng ta sẽ phải sử dụng thuộc tính clear.

Thuộc tính clear chỉ định điều gì sẽ xảy ra với element bên cạnh element nổi.

Thuộc tính clear có thể có một trong các giá trị sau:

  • none - Element không được đẩy xuống bên dưới element nổi bên trái hoặc bên phải. Đây là mặc định
  • left - Element được đẩy xuống bên dưới các element nổi bên trái
  • right - Element được đẩy xuống bên dưới các element nổi bên phải
  • both - Element được đẩy xuống bên dưới cả element nổi bên trái và bên phải
  • inherit - Element kế thừa giá trị clear từ element cha của nó

Khi clear float, bạn nên chỉ rõ ràng với phần nổi: Nếu một element được làm nổi ở bên trái, thì bạn nên xóa ở bên trái. Element nổi của bạn sẽ tiếp tục nổi, nhưng element đã clear sẽ xuất hiện bên dưới element đó trên trang web.

div1 {    float: left;  }    div2 {    clear: left;  }

 

clearfix Hack

Nếu một phần tử float cao hơn element container, nó sẽ "tràn" ra bên ngoài vùng chứa của nó. Sau đó, chúng tôi có thể thêm một bản "hack" clearfix để giải quyết vấn đề này:

.clearfix {    overflow: auto;  }

Phần bổ sung: overflow: auto; clearfix hoạt động tốt miễn là bạn có thể giữ quyền kiểm soát các margin và phần padding của mình (nếu không, bạn có thể thấy thanh cuộn). Tuy nhiên, bản "hack" clearfix mới, hiện đại, an toàn hơn khi sử dụng và code sau được sử dụng cho hầu hết các trang web:

.clearfix::after {    content: "";    clear: both;    display: table;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.