我想问一下高度和浮动是如何工作的。我有一个外部div和一个内部div，其中有内容。它的高度可能会根据内部div的内容而变化，但似乎我的内部div将溢出它的外部div。什么是正确的方法呢?
< html > <身体> < span style=" font - family:宋体;最小高度:100 px;背景颜色:橙色”> < div风格= "宽度:500 px;身高:200 px;背景颜色:黑色;浮:对" > < / div > < / div > < /身体> < / html >
当前回答
你可以使用溢出属性的容器div，如果你没有任何div显示在容器上，例如:
<div class="cointainer">
<div class="one">Content One</div>
<div class="two">Content Two</div>
</div>
下面是下面的css:
.container{
width:100%;/* As per your requirment */
height:auto;
float:left;
overflow:hidden;
}
.one{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.two{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
----------------------- 或 ------------------------------
<div class="cointainer">
<div class="one">Content One</div>
<div class="two">Content Two</div>
<div class="clearfix"></div>
</div>
下面是下面的css:
.container{
width:100%;/* As per your requirment */
height:auto;
float:left;
overflow:hidden;
}
.one{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.two{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.clearfix:before,
.clearfix:after{
display: table;
content: " ";
}
.clearfix:after{
clear: both;
}
其他回答
这是因为div的浮动。添加overflow:隐藏在外部元素。
<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
<div style="width:500px; height:200px; background-color:black; float:right">
</div>
</div>
Demo
你可以使用溢出属性的容器div，如果你没有任何div显示在容器上，例如:
<div class="cointainer">
<div class="one">Content One</div>
<div class="two">Content Two</div>
</div>
下面是下面的css:
.container{
width:100%;/* As per your requirment */
height:auto;
float:left;
overflow:hidden;
}
.one{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.two{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
----------------------- 或 ------------------------------
<div class="cointainer">
<div class="one">Content One</div>
<div class="two">Content Two</div>
<div class="clearfix"></div>
</div>
下面是下面的css:
.container{
width:100%;/* As per your requirment */
height:auto;
float:left;
overflow:hidden;
}
.one{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.two{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.clearfix:before,
.clearfix:after{
display: table;
content: " ";
}
.clearfix:after{
clear: both;
}
试试这个
.parent_div{
display: flex;
}
You confuse how browsers renders the elements when there are floating elements. If one block element is floating (your inner div in your case), other block elements will ignore it because browser removes floating elements from the normal flow of the web page. Then, because the floated div has been removed from the normal flow, the outside div is filled in, like the inner div isn't there. However, inline elements (images, links, text, blackquotes) will respect the boundaries of the floating element. If you introduce text in the outside div, the text will place arround de inner div.
换句话说，块元素(标题、段落、div等)忽略浮动元素并进行填充，而内联元素(图像、链接、文本等)尊重浮动元素的边界。
这里有一个小提琴的例子
<body>
<div style="float:right; background-color:blue;width:200px;min-height:400px;margin-right:20px">
floating element
</div>
<h1 style="background-color:red;"> this is a big header</h1>
<p style="background-color:green"> this is a parragraph with text and a big image. The text places arrounds the floating element. Because of the image is wider than space between paragrah and floating element places down the floating element. Try to make wider the viewport and see what happens :D
<img src="http://2.bp.blogspot.com/_nKxzQGcCLtQ/TBYPAJ6xM4I/AAAAAAAAAC8/lG6XemOXosU/s1600/css.png">
</p>
你需要添加overflow:auto到你的父div，以包含内部浮动的div:
<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange;overflow:auto">
<div style="width:500px; height:200px; background-color:black; float:right">
</div>
</div>
jsFiddle例子
