如何适应div的高度来包裹浮动的孩子

Question

我有一个div缠着两个孩子,一个漂浮在左边,另一个漂浮在右边.我想在孩子周围放置一个边框和背景,但div有0高,因为它不会调整大小以适应孩子.

以下是它的实例:http: //jsfiddle.net/VVZ7j/17/

我希望红色背景一直向下.我试过身高:自动,但那没用.

任何和所有的帮助将不胜感激,谢谢.

PS我不想使用任何JavaScript,如果可能的话.

Answer 1

使用浮动时这是一个常见问题.有几种常见的解决方案,我根据个人喜好订购(最佳方法优先):

1. 使用:: after CSS伪元素.这被称为'clearfix',适用于IE8及以上版本.如果您需要与早期版本的IE兼容,这个答案应该有所帮助.例子.

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

2. 将两个浮点数添加到具有CSS属性overflow: auto或的容器中overflow: hidden.但是,这种方法可能会导致问题(例如,当工具提示与父元素的边缘重叠时,将出现滚动条).例子.

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

3. 将设置高度添加到父元素.例子.

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

4. 使父元素成为浮点数.例子.

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

5. 在浮动之后添加一个div clear: both.例子.

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

Answer 2

添加overflow: hidden;到#wrap.这是一个clear fix.这里有一些关于它的文档:http://positioniseverything.net/easyclearing.html

LE:根据浏览器的兼容性,还有多种方法可以实现这一点:

1. 添加溢出:隐藏到父容器.

#wrap { overflow: hidden; }

1. 使用伪元素添加clear: both.

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

1. 最常用的tehnique是添加额外的父容器的最后一个元素.

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

not当你获得额外的HTML标记时,我会使用第三个.