01/10/2018, 10:46

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

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à .

Henry viết 12:56 ngày 01/10/2018

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 viết 12:54 ngày 01/10/2018

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>block, vì thế nó chiếm hết chỗ của cái float04 và đẩy float04 xuống dưới.

Phuong Chris viết 12:53 ngày 01/10/2018

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
Hoàng Anh viết 12:48 ngày 01/10/2018

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

Bài liên quan
0