Hỏi về thuộc tính float trong css

[hoanganh1 (Hoàng Anh)]

Mọi người giải thích giúp em cái ví dụ trên với.
Tại sao border của thẻ div nó không bao luôn float04 vậy???
Cái float04 nó nằm trong thẻ div mà .

[thanhtrung2314 (Trung Nguyen)]

Theo mình thấy là cái <p> có class="floatNone" nó ngắt float. Do đó cái float04 không thể float: left; theo => bị đẩy ra ngoài div

[2_N]

Mình nghĩ là do dòng float: none; nó làm cái float03 trở về thuộc tính mặc định của thẻ <p> mà thuộc tính mặc định của <p> là block, vì thế nó chiếm hết chỗ của cái float04 và đẩy float04 xuống dưới.

[sharinganVNP (Phuong Chris)]

Có nhiều cách để khắc phục, tuy nhiên có 2 cách dễ nhất:``

div { border: 1px solid #ff0000; } p { float: left; } p.floatNone { float: none; } /* br { clear: both; } */ div::after { content: ""; display: table; clear: both; } /*Cách 2*/

float01

float02

float03

float04

`` Cách 1 trong phần comment, giải thích hơi dài nên thôi bạn tự tìm hiểu nhé :slight_smile: Cách 2 phổ biến hơn, xem ở đây: https://www.w3schools.com/css/css_float.asp

[hoanganh1 (Hoàng Anh)]

Cảm ơn mọi người nhiều nhe.
Mình hiểu rồi.