Tương tác giữa float và inline-block

Chào mọi người, mình có một số thắc mắc về float và inline-block

Theo mình được biết nếu 1 element float thì sẽ thoát khỏi - loại bỏ khỏi normal document flow, và trình duyệt sẽ không nhận thấy sự hiện diện của nó, trong code bên dưới, khi div1 float thì div2 sẽ chiếm chỗ của div 1(hình 1 và 2) và nằm dưới div1 có float

Nhưng sau khi mình cho div2 thuộc tính display: inline-block thì nó vẫn nhảy lên, nhưng không nằm dưới nữa, mà né div1 ra, phải chăng div2 nhận thấy được sự hiện diện của div1 và element có display: inline-block sẽ nhận được sự hiện diện của element có float (hình 3, hình 4)

Nhưng nếu thay float thành position: absolute thì không xảy ra sự việc trên.

Mong mọi người giải đáp thắc mắc của mình về trường hợp float và inline-block ạ. Lúc code mình nghĩ rằng div 2 vẫn chiếm chỗ div1 và sẽ nằm dưới div1, nhưng khi chạy code thì thấy div2 né div1 ra.

Cảm ơn mọi người!




Cái bạn cần xem lại là thái độ tương tác của bạn

5 Likes

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.

Hiểu đơn giản là div2 của bạn được đối xữ giống như text hoặc image như câu phía trên.

4 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?