我想问一下高度和浮动是如何工作的。我有一个外部 div 和一个包含内容的内部 div。它的高度可能会因内部 div 的内容而异，但似乎我的内部 div 会溢出其外部 div。正确的做法是什么？
<html>
<body>
<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange">
<div style="width:500px; height:200px; background-color:black; float:right"></div>
</div>
</body>
</html>【问题讨论】：
试试这个
.parent_div{
display: flex;
}
【讨论】：
浮动元素不会增加容器元素的高度，因此如果你不清除它们，容器高度不会增加......
我会直观地告诉你：
更多解释：
<div>
<div style="float: left;"></div>
<div style="width: 15px;"></div> <!-- This will shift
besides the top div. Why? Because of the top div
is floated left, making the
rest of the space blank -->
<div style="clear: both;"></div>
<!-- Now in order to prevent the next div from floating beside the top ones,
we use `clear: both;`. This is like a wall, so now none of the div's
will be floated after this point. The container height will now also include the
height of these floated divs -->
<div></div>
</div>
您也可以在容器元素上添加overflow: hidden;，但我建议您改用clear: both;。
此外，如果您想自行清除可以使用的元素
.self_clear:after {
content: "";
clear: both;
display: table;
}
float 属性被大多数初学者误解。那么，float 到底是做什么的？最初，float 属性被引入以围绕图像流动文本，这些图像是浮动的left 或right。 Here's another explanation@Madara Uchicha。
那么，使用float 属性来并排放置盒子是错误的吗？答案是否；如果您使用float 属性来并排设置框，则没有问题。
浮动inline 或block 级别元素将使该元素的行为类似于inline-block 元素。
你不能 float 一个元素 center。这是我在初学者中经常遇到的最大问题，使用 float: center;float 属性的有效值。 float 通常用于float/将内容移动到非常left 或非常right。 float 属性只有 四个 有效值，即 left、right、none（默认）和 inherit。
父元素折叠，当它包含浮动子元素时，为了防止这种情况，我们使用clear: both;属性，清除两边的浮动元素，这样可以防止父元素折叠。更多信息可以参考我的另一个答案here。
（重要） 想想我们有一堆各种元素的地方。当我们使用float: left; 或float: right; 时，元素在堆栈上方移动一个。因此，普通文档流中的元素将隐藏在浮动元素后面，因为它位于普通浮动元素之上的堆栈级别。 （请不要将此与z-index 联系起来，因为那完全不同。）
以一个例子来解释 CSS 浮动是如何工作的，假设我们需要一个简单的 2 列布局，带有页眉、页脚和 2 列，那么蓝图是这样的......
在上面的示例中，我们将只浮动红色框，您可以将float 都浮动到left，或者您可以将float 浮动到left，另一个也浮动到right , 取决于布局，如果它是 3 列，您可以 float 2 列到 left 另一列到 right 所以取决于，尽管在这个例子中，我们有一个简化的 2 列布局，所以 float一个给left，另一个给right。
用于创建布局的标记和样式进一步解释...
<div class="main_wrap">
<header>Header</header>
<div class="wrapper clear">
<div class="floated_left">
This<br />
is<br />
just<br />
a<br />
left<br />
floated<br />
column<br />
</div>
<div class="floated_right">
This<br />
is<br />
just<br />
a<br />
right<br />
floated<br />
column<br />
</div>
</div>
<footer>Footer</footer>
</div>
* {
-moz-box-sizing: border-box; /* Just for demo purpose */
-webkkit-box-sizing: border-box; /* Just for demo purpose */
box-sizing: border-box; /* Just for demo purpose */
margin: 0;
padding: 0;
}
.main_wrap {
margin: 20px;
border: 3px solid black;
width: 520px;
}
header, footer {
height: 50px;
border: 3px solid silver;
text-align: center;
line-height: 50px;
}
.wrapper {
border: 3px solid green;
}
.floated_left {
float: left;
width: 200px;
border: 3px solid red;
}
.floated_right {
float: right;
width: 300px;
border: 3px solid red;
}
.clear:after {
clear: both;
content: "";
display: table;
}
让我们一步一步来布局，看看浮动是如何工作的..
首先，我们使用主包装元素，您可以假设它是您的视口，然后我们使用header 并分配height 的50px，所以没什么特别的。它只是一个普通的非浮动块级元素，它将占用100% 水平空间，除非它是浮动的或者我们将inline-block 分配给它。
float 的第一个有效值是left，因此在我们的示例中，我们使用float: left; 来表示.floated_left，因此我们打算将一个块浮动到容器元素的left。
是的，如果您看到，父元素 .wrapper 已折叠，您看到的带有绿色边框的元素没有展开，但它应该是对的？待会再讨论，目前，我们有一个浮动到 left 的列。
来到第二列，让它float这个right
Another column floated to the right
在这里，我们有一个300px 宽列，我们将其float 连接到right，当它浮动到left 时，它将位于第一列旁边，因为它浮动到left，它为right 创建了空槽，并且由于right 上有足够的空间，我们的right 浮动元素完美地位于left 旁边。
尽管如此，父元素还是折叠了，好吧，现在让我们修复它。有很多方法可以防止父元素折叠。
clear: both;，它包含浮动元素，现在这个是clear 浮动元素的廉价解决方案，它将为您完成这项工作，但我会建议不要使用这个。在.wrapper div 结束前添加<div style="clear: both;"></div>，就像
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
好吧，这解决得很好，不再有折叠的父级，但它向 DOM 添加了不必要的标记，因此有人建议，在包含浮动子元素的父元素上使用 overflow: hidden;，这可以按预期工作。
在.wrapper 上使用overflow: hidden;
.wrapper {
border: 3px solid green;
overflow: hidden;
}
每次我们需要 clear float 时，这为我们节省了一个元素，但是当我用它测试各种案例时，它在一个特定的案例中失败了，它在子元素上使用了 box-shadow。
Demo（无法看到所有 4 个侧面的阴影，overflow: hidden; 导致此问题）
那么现在呢？保存一个元素，没有overflow: hidden; 所以去明确的修复黑客，在你的CSS中使用下面的sn-p，就像你对父元素使用overflow: hidden;一样，在父元素上调用class自我清除。
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
在这里，阴影按预期工作，而且它会自行清除防止折叠的父元素。
最后，我们在clear 浮动元素之后使用页脚。
什么时候使用float: none;，因为它是默认值，所以要声明float: none;吗？
好吧，这取决于，如果您要进行响应式设计，您将多次使用此值，当您希望浮动元素以特定分辨率呈现在另一个下方时。因为float: none; 属性在那里起着重要作用。
float 有用的真实示例很少。
img 浮动在 p 中，这将使我们的内容能够四处流动。Demo（不浮动img）
Demo 2（img 浮动到left）
float 创建水平菜单 - Demo
最后但并非最不重要的一点是，我想解释一下这种特殊情况，您 float 仅将单个元素传递给 left 但您没有 float 另一个，那么会发生什么？
假设如果我们从.floated_right class 中删除float: right;，则div 将从极端left 呈现，因为它没有浮动。
所以在这种情况下，你可以float the to the left as well
或
你可以use margin-left which will be equal to the size of the left floated column i.e 200px wide。
【讨论】：
clear: both; 中的解释保持一致，但如果您觉得编辑有道理，那就没关系，所以让我们保持这种方式
如果您没有任何 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 可见，在这种情况下添加一个清除元素是完全可以接受的。
【讨论】：
当存在浮动元素时，您会混淆浏览器如何呈现元素。如果一个块元素是浮动的（在您的情况下是您的内部 div），其他块元素将忽略它，因为浏览器会从网页的正常流程中删除浮动元素。然后，因为浮动 div 已从正常流程中移除，所以外部 div 被填充，就像内部 div 不存在一样。但是，内联元素（图像、链接、文本、黑引号）将尊重浮动元素的边界。如果在外部div中引入文本，文本将放在内部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 的浮动。在外部元素上添加overflow: hidden。
<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>
【讨论】：
您需要将 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>
【讨论】：