DIV, chiều cao và nổi

Question

Tôi có nổi divs đỏ trên div màu xanh như trên hình ảnh

<div class="blue"> 
    <div style="height: 40px; float: left"></div> 
    <div style="height: 40px; float: left"></div> 
    <div style="height: 40px; float: left"></div> 

    <div style="height: 40px; float: left"></div> 
    <div style="height: 40px; float: left"></div> 
    <div style="height: 40px; float: left"></div> 
</div> 

tôi muốn làm, vì vậy màu xanh div có chiều cao trên DIV đỏ. Khi tôi loại bỏ phao nó là OK.

Answer 1

Bạn cần thêm màn hình: ô bảng; hoặc tràn: ẩn; để div màu xanh của bạn. Điều này sẽ cho cha mẹ chiều cao của nó là trẻ em.

Demo

như thế này:

.blue{ 
    overflow:hidden; 
    //or 
    //display:table-cell; 
} 

một sidenote - divs bạn cần có chiều rộng khi họ đang nổi.

Bạn cũng có tùy chọn để làm cho div của bạn với lớp màu xanh nổi. Nhưng điều này có thể gây ra một số hành vi không mong muốn trong tài liệu của bạn (nếu div không phải là nổi).

Answer 2

Đơn giản chỉ cần thả nổi div xanh:

.blue{ 
    float: left; 
} 

Sau đó nó sẽ mở rộng để đưa vào chiều cao của trẻ em của nó.

Nếu nổi không phải là một lựa chọn, tôi sẽ đặt display-inline-block để làm cho nó hành xử theo cách tương tự như một yếu tố nổi.

.blue{ 
    display: inline-block; 
} 

tham khảo: https://developer.mozilla.org/en-US/docs/CSS/display

Answer 3

Đó là một vấn đề rất phổ biến được gọi là 'clearfix' vấn đề. Thông tin thêm có thể được tìm thấy (ví dụ) ở đây: Div rendering incorrectly in Firefox

Nói tóm lại, bạn nên thêm một lớp .clearfix với bạn mẹ (màu xanh) div mà trông giống như sau:

.clearfix { 
    *zoom: 1; 
} 
.clearfix:before, 
.clearfix:after { 
    display: table; 
    content: ""; 
    line-height: 0; 
    } 
&:after { 
    clear: both; 
} 

Cái này là 'mượn 'từ Twitter Bootsrap, bu có rất nhiều lựa chọn thay thế. Đối với lý do tại sao và làm thế nào nó hoạt động, tôi đề nghị googling 'clearfix'.

Lưu ý rằng có tồn tại 'các bản sửa lỗi' khác như làm việc với inline blocks, thêm overflow: hidden hoặc thậm chí hiển thị là table-cell. Mặc dù họ có thể làm việc trong một số tình huống, họ hầu như tất cả đều có tác dụng phụ khác, hoặc không phải là hoàn toàn qua trình duyệt, vì vậy họ nên được sử dụng cẩn thận.

Answer 4

Nếu bạn cần một cái gì đó sạch và năng động hơn, hãy thử này:

<div class="blue"> 
<div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
<div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

Và đây:

.blue {background-color: blue;text-align: center;display: inline-block;padding: 5px;} 
.blue > div > div {background-color: red; width:100px; height: 50px; margin: 10px;display: inline-block;} 

Example on jsfiddle

Answer 5

Một tùy chọn khác mà không tương thích trong tất cả các tùy chọn trình duyệt nhưng không cần phao: để lại

.blue{ 
 
    background-color:blue; 
 
    overflow:hidden; 
 
    width: 140px; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    flex-wrap: wrap; 
 
} 
 

 
.blue div{ 
 
    background-color:red; 
 
    margin: 2.5px 0 2.5px 0; 
 
    width:40px; 
 
}

<div class="blue"> 
 
    <div style="height: 40px;"></div> 
 
    <div style="height: 40px;"></div> 
 
    <div style="height: 40px;"></div> 
 

 
    <div style="height: 40px;"></div> 
 
    <div style="height: 40px;"></div> 
 
    <div style="height: 40px;"></div> 
 
</div>