Làm thế nào để phù hợp với chiều cao của một div để quấn quanh trẻ em nổi của nó

Question

Tôi có một div bọc xung quanh hai trẻ em, một trôi nổi trái và bên phải khác. Tôi muốn đặt một biên giới và nền xung quanh trẻ em, nhưng div có 0 chiều cao vì nó không thay đổi kích cỡ để phù hợp với trẻ em.

Dưới đây là một ví dụ về nó trong hành động: http://jsfiddle.net/VVZ7j/17/

Tôi muốn các nền đỏ để đi tất cả các con đường xuống. Tôi đã thử chiều cao: tự động, nhưng điều đó không hoạt động.

Bất kỳ và tất cả trợ giúp sẽ được đánh giá cao, cảm ơn.

P.S. Tôi không muốn sử dụng bất kỳ javascript nếu có thể.

Answer 1

Đây là vấn đề thường gặp khi làm việc với phao nổi. Có một số giải pháp phổ biến mà tôi đã đặt hàng theo sở thích cá nhân (cách tiếp cận tốt nhất trước tiên):

1. Sử dụng :: sau phần tử giả CSS. Điều này được gọi là 'clearfix', và hoạt động IE8 trở lên. Nếu bạn cần khả năng tương thích với các phiên bản trước của IE, this answer should help. Example.

   .parentelement::after { 
       content: ""; 
       display: table; 
       clear: both; 
   } 
   

2. Thêm hai phao vào một container với các thuộc tính CSS overflow: auto hoặc overflow: hidden. Tuy nhiên, cách tiếp cận này có thể gây ra vấn đề (ví dụ: khi chú giải công cụ chồng lên các cạnh của phần tử gốc, thanh cuộn sẽ xuất hiện). Example.

   <div style="overflow: auto"> 
       <div style="float: left"></div> 
       <div style="float: left"></div> 
   </div> 
   

3. Thêm chiều cao được đặt thành phần tử gốc. Example.

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

4. Làm cho phần tử gốc nổi. Example.

   <div style="float: left"> 
       <div style="float: left"></div> 
       <div style="float: left"></div> 
   </div> 
   

5. Thêm div sau phao với clear: both. Example.

   <div style="float: left"></div> 
   <div style="float: left"></div> 
   <div style="clear: both"></div> 
   

Answer 2

Thêm overflow: hidden; vào #wrap. Đây là clear fix. Dưới đây là một số tài liệu về nó: http://positioniseverything.net/easyclearing.html

LE: Ngoài ra còn có nhiều cách bạn có thể đạt được điều này, phụ thuộc vào các khả năng xử lí trình duyệt:

1. Thêm overflow: hidden đến vùng chứa mẹ.

#wrap { overflow: hidden; }

1. Sử dụng một phần tử giả để thêm clear: both.

#wrap:after { clear: both; content: ""; display: table;}

1. Các thông dụng nhất tehnique là cộng thêm như là yếu tố cuối cùng của vùng chứa mẹ.

<div style="clear:both"></div>

tôi preffer not sử dụng một trong 3 khi bạn nhận được đánh dấu HTML thêm.

Answer 3

Hãy thử thêm overflow: hidden vào #wrapdiv của bạn.

Answer 4

Chỉ cần thêm một người nữa div với phong cách clear: both trước khi đóng cửa một bên ngoài div tức là ở đây "quấn"

--Sample code--

<div id="wrap"> 
    <div id="left"> 
     <p>some content at left</p> 
    </div> 
    <div id="right"> 
     <p>some content at right</p> 
    </div> 
    <div style="clear:both"></div> 
</div> 

Answer 5

Tôi đã bắt đầu sử dụng giải pháp "clear-clearfix" này từ Nicolas Gallagher.

http://nicolasgallagher.com/micro-clearfix-hack/

/* For modern browsers */ 
.cf:before, 
.cf:after { 
    content:""; 
    display:table; 
} 

.cf:after { 
    clear:both; 
} 

/* For IE 6/7 (trigger hasLayout) */ 
.cf { 
    *zoom:1; 
} 

Chỉ cần thêm rằng để CSS của bạn và bất kỳ yếu tố nổi, thêm lớp "cf" vào wrapper của bất kỳ bất kỳ yếu tố đó đã nổi lên trẻ em.