Html 如何适应 div 的高度以环绕其漂浮的孩子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10969023/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fit a div's height to wrap around its floated children
提问by Hymantheripper
I have a div wrapped around two children, one floated left and the other right. I want to put a border and background around the children, but the div has 0 height since it doesn't resize to fit the children.
我有一个围绕着两个孩子的 div，一个向左浮动，另一个向右浮动。我想在孩子周围放置边框和背景，但 div 的高度为 0，因为它不会调整大小以适合孩子。
Here is an example of it in action: http://jsfiddle.net/VVZ7j/17/
这是它的一个例子：http: //jsfiddle.net/VVZ7j/17/
I want the red background to go all the way down. I've tried height:auto, but that didn't work.
我希望红色背景一直向下。我试过高度：自动，但这没有用。
Any and all help would be appreciated, thanks.
任何和所有帮助将不胜感激，谢谢。
P.S. I don't want to use any javascript if that's possible.
PS 如果可能的话，我不想使用任何 javascript。
回答by Hymantheripper
This is a common issue when working with floats. There are several common solutions, which I have ordered by personal preference (best approach first):
这是使用浮点数时的常见问题。有几种常见的解决方案，我按个人喜好排序（最佳方法优先）：
Use the ::after CSS pseudo element. This is know as the 'clearfix', and works IE8 and up. If you need compatibility with earlier versions of IE, this answer should help. Example.
.parentelement::after { content: ""; display: table; clear: both; }Add the two floats into a container with the CSS attribute
overflow: autooroverflow: hidden. However, this approach can cause issues (e.g. when a tooltip overlaps the edges of the parent element a scrollbar will appear). Example.<div style="overflow: auto"> <div style="float: left"></div> <div style="float: left"></div> </div>Add a set height to the parent element. Example.
<div style="height: 200px"> <div style="float: left"></div> <div style="float: left"></div> </div>Make the parent element a float. Example.
<div style="float: left"> <div style="float: left"></div> <div style="float: left"></div> </div>Add a div after the floats with
clear: both. Example.<div style="float: left"></div> <div style="float: left"></div> <div style="clear: both"></div>
使用 ::after CSS 伪元素。这被称为“clearfix”，适用于 IE8 及更高版本。如果您需要与早期版本的 IE 兼容，这个答案应该会有所帮助。例子。
.parentelement::after { content: ""; display: table; clear: both; }将两个浮点数添加到具有 CSS 属性
overflow: auto或的容器中overflow: hidden。但是，这种方法可能会导致问题（例如，当工具提示与父元素的边缘重叠时，将出现滚动条）。例子。<div style="overflow: auto"> <div style="float: left"></div> <div style="float: left"></div> </div>为父元素添加一个设置的高度。例子。
<div style="height: 200px"> <div style="float: left"></div> <div style="float: left"></div> </div>使父元素浮动。例子。
<div style="float: left"> <div style="float: left"></div> <div style="float: left"></div> </div>在浮动后添加一个 div
clear: both。例子。<div style="float: left"></div> <div style="float: left"></div> <div style="clear: both"></div>
回答by BebliucGeorge
Add overflow: hidden;to #wrap. This is a clear fix. Here's some documentation about it: http://positioniseverything.net/easyclearing.html
添加overflow: hidden;到#wrap。这是一个clear fix. 这里有一些关于它的文档：http: //positioniseeverything.net/easyclearing.html
LE: There are also multiple ways you can achieve this, depending of the browser compatibilty:
LE：还有多种方法可以实现这一点，具体取决于浏览器兼容性：
- Add overflow: hidden to the parent container.
- 添加溢出：隐藏到父容器。
#wrap { overflow: hidden; }
#wrap { overflow: hidden; }
- Use a pseudo-element to add
clear: both.
- 使用伪元素添加
clear: both.
#wrap:after { clear: both; content: ""; display: table;}
#wrap:after { clear: both; content: ""; display: table;}
- The most commonly used tehnique is to add an extra as the last element of the parent container.
- 最常用的技术是添加一个 extra 作为父容器的最后一个元素。
<div style="clear:both"></div>
<div style="clear:both"></div>
I preffer notto use the 3rd one as you get extra HTML markup.
not当您获得额外的 HTML 标记时，我更喜欢使用第三个。
回答by Jim
Try adding overflow: hiddento your #wrapdiv.
尝试添加overflow: hidden到您的#wrapdiv.
回答by jmbertucci
I've come to start using this "micro-clearfix" solution from Nicolas Gallagher.
我开始使用 Nicolas Gallagher 的“micro-clearfix”解决方案。
http://nicolasgallagher.com/micro-clearfix-hack/
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;
}
Just add that to your CSS and any floated element, add the "cf" class to the wrapper of any any element that has floated children.
只需将它添加到您的 CSS 和任何浮动元素，将“cf”类添加到任何具有浮动子元素的元素的包装器中。
回答by vikrantx
Just add one more div with style clear:bothbefore closing a outer div i.e. here "wrap"
只需添加一个样式清晰的div ：在关闭外部 div 之前，即此处“包装”
--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>
