CSS Float

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;

img {    float: right;  }

 

Ví dụ - float: left;

img {    float: left;  }

 

Ví dụ - float: none;

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;  }