我想问一下高度和浮动是如何工作的。我有一个外部 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>浮动元素不会增加容器元素的高度，因此如果您不清除它们，容器高度不会增加......
我将直观地向您展示：
更多解释：
<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. 这是@Madara Uchicha 的另一个解释。
那么，使用该float属性将盒子并排放置是错误的吗？答案是否定的；如果您使用该float属性来并排设置框，则没有问题。
浮动inline或block级别元素将使元素表现得像一个inline-block元素。
如果浮动一个元素left或right，width该元素的 将被限制在它所拥有的内容中，除非width明确定义...
你不能float一个元素center。这是我一直在初学者中看到的最大问题， using ，这不是该属性float: center;floatfloatfloatfloatleftrightnoneinherit
父元素折叠，当它包含浮动的子元素时，为了防止这种情况，我们使用clear: both;属性，清除两边的浮动元素，这样可以防止父元素折叠。有关更多信息，您可以在此处参考我的另一个答案。
（重要）想想我们有一堆各种元素的地方。当我们使用float: left;或float: right;元素在堆栈上方移动一个时。因此，普通文档流中的元素将隐藏在浮动元素后面，因为它位于普通浮动元素之上的堆栈级别。（请不要将其与此联系起来，z-index因为那是完全不同的。）
以一个案例为例来解释 CSS 浮动是如何工作的，假设我们需要一个简单的 2 列布局，带有页眉、页脚和 2 列，那么蓝图是这样的......
在上面的示例中，我们将只浮动红色框，您可以float同时浮动到 ，left或者您可以浮动float到left，另一个浮动right也取决于布局，如果它是 3 列，您可以float2 列到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并分配 a heightof50px所以没什么特别的。它只是一个普通的非浮动块级元素，它将占用100%水平空间，除非它是浮动的或我们分配inline-block给它。
在我们的示例中，第一个有效值float是left，我们使用float: left;for .floated_left，因此我们打算将一个块浮动到left容器元素的 。
是的，如果您看到.wrapper折叠的父元素，您看到的带有绿色边框的元素没有展开，但它应该是对的？稍后会回到那个，现在，我们有一个列浮动到left.
来到第二列，让它float这一列right
在这里，我们有一个300px宽的柱子，我们float将right它放在第一列的旁边，因为它浮动到left，并且由于它浮动到left，它创建了到 的空槽right，并且由于 有足够的空间right，我们的right浮动元素完美地坐在旁边left。
尽管如此，父元素还是折叠了，好吧，现在让我们修复它。有很多方法可以防止父元素折叠。
clear: both;在包含浮动元素的父元素结束之前使用，现在这个是clear浮动元素的廉价解决方案，可以为您完成这项工作，但我建议不要使用它。<div style="clear: both;"></div>在结束之前添加.wrapper div，例如
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
好吧，这很好地解决了，不再有折叠的父级，但它向 DOM 添加了不必要的标记，因此有人建议，overflow: hidden;在包含浮动子元素的父元素上使用，这些子元素按预期工作。
使用overflow: hidden;在.wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
每次我们需要时，这都会为我们节省一个元素，clear float但是当我用它测试各种案例时，它在一个特定的案例中失败了，它box-shadow在子元素上使用。
演示（无法看到所有 4 个侧面的阴影，overflow: hidden;导致此问题）
所以现在怎么办？保存一个元素，不要overflow: hidden;再去寻找一个清晰的修复技巧，在你的 CSS 中使用下面的代码片段，就像你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有用。
imgfloated insidep将使我们的内容能够四处流动。演示（不浮动img）
Demo 2 (img浮动到left)
float创建水平菜单 -演示最后但并非最不重要的一点是，我想解释一下这种特殊情况，其中您float只有一个元素，left但您没有float其他元素，那么会发生什么？
假设如果我们float: right;从我们.floated_right class的 中移除 ，div将会从extreme 渲染，left因为它没有浮动。
所以在这种情况下，你也float可以left
或者
您需要添加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>
您遇到了浮动错误（尽管由于有多少浏览器表现出这种行为，我不确定这是否是技术上的错误）。这是正在发生的事情：
一般情况下，假设没有明确设置高度，块级元素如 div 会根据其内容设置高度。父 div 的底部将超出最后一个元素。不幸的是，浮动元素会阻止父元素在确定其高度时考虑浮动元素。这意味着如果你的最后一个元素是浮动的，它不会像普通元素那样“拉伸”父元素。
清算
有两种常见的方法可以解决此问题。首先是增加一个“清算”元素；也就是说，浮动元素下方的另一个元素将强制父元素拉伸。因此，添加以下 html 作为最后一个子项：
<div style="clear:both"></div>
它不应该是可见的，并且通过使用 clear:both，您可以确保它不会位于浮动元素旁边，而是在它之后。
溢出：
大多数人（我认为）更喜欢的第二种方法是更改父元素的 CSS，以便溢出不是“可见的”。因此将溢出设置为“隐藏”将迫使父级超出浮动子级的底部。当然，这仅在您没有在父级上设置高度时才成立。
就像我说的，第二种方法是首选，因为它不需要你去向你的标记添加语义上无意义的元素，但有时你需要overflow可见，在这种情况下，添加一个清除元素是可以接受的.
这是因为 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>
当存在浮动元素时，您会混淆浏览器如何呈现元素。如果一个块元素是浮动的（在您的情况下是您的内部 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>
试试这个
.parent_div{
display: flex;
}
如果您没有任何 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;
}