我想问一下高度和浮动是如何工作的。我有一个外部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)将根据其内容设置其高度。父div的底部将超出最后一个元素。不幸的是，浮动元素会阻止父元素在确定其高度时考虑被浮动元素。这意味着如果你的最后一个元素是浮动的，它不会像普通元素那样“拉伸”父元素。
清算
有两种常见的方法可以解决这个问题。第一种是添加一个“清算”元素;也就是说，在被浮动元素之下的另一个元素将强制父元素拉伸。所以添加下面的html作为最后一个子元素:
<div style="clear:both"></div>
它不应该是可见的，通过使用clear:both，可以确保它不会位于被浮动元素的旁边，而是在它之后。
溢出:
第二种方法，也是大多数人(我认为)更喜欢的方法是改变父元素的CSS，这样溢出就不会“可见”。因此，将overflow设置为“hidden”将迫使父对象延伸到被浮动子对象的底部之外。当然，这只在你没有在父节点上设置高度的情况下才成立。
正如我所说，第二种方法是首选的，因为它不需要向标记中添加语义上无意义的元素，但有时需要溢出可见，在这种情况下，添加清除元素是可以接受的。
你需要添加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例子
试试这个
.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>
你可以使用溢出属性的容器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;
}
