为什么不包含浮动元素的容器元素的高度增加？
我想问问高度和浮动是如何工作的。 我有一个外部的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 beside the top div. Why? Because 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; 对容器元素，但我build议你使用clear: both; 代替。
另外如果你想自己清理一个你可以使用的元素
.self_clear:after { content: ""; clear: both; display: table; }
如何CSS浮动工作？
什么是完全浮动的，它有什么作用？
-
float性被大多数初学者误解。 那么，float究竟做了什么？ 最初，float属性被引入到左右浮动的图像周围的文本。 这是 @Madara Uchicha 的另一个解释 。那么，使用
float属性来放置盒子是不对的？ 答案是否定的 ; 如果您使用float属性为了设置框并排没有问题。 -
浮动
inline或block级元素将使该元素的行为像一个inline-block元素。演示
-
如果将任何元素
left或right浮动，则元素的width将限制为其所包含的内容，除非显式定义width。 -
你不能
float元素center。 这是我一直在初学者看到的最大的问题，使用float: center;float属性的有效值。float通常用于将内容float/移动到最左边或最右边 。float属性只有四个有效值，即left，right，none（default）和inherit。 -
当父元素包含浮动的子元素时，父元素会崩溃，为了防止这种情况，我们使用
clear: both;属性，以清除两侧的浮动元素，这将防止父元素的崩溃。 欲了解更多信息，你可以参考我的另一个答案在这里 。 -
（重要）想一想，我们在哪里有各种元素的堆栈。 当我们使用
float: left;或float: right;元素在堆栈上方移动一个。 因此，普通文档stream中的元素将隐藏在浮动元素之后，因为它位于正常浮动元素之上的堆栈级别上。 （请不要将此与z-index联系起来，因为这是完全不同的）。
以一个案例来解释CSS浮动的工作方式，假设我们需要一个简单的2列布局，头部，页脚和2列，所以这里是蓝图的样子。
在上面的例子中，我们只会浮动红框，或者可以float到left ，也可以float到left ，另一个right ，取决于布局，如果是3列，则可以float 2列left的另一个right依赖的，虽然在这个例子中，我们有一个简化的2列布局，所以会float一个left ，另一个right 。
用于创build布局的标记和样式，进一步向下解释…
<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并指定一个50px的height ，所以没有什么奇特的。这只是一个正常的非浮动块级元素，将占用100%水平空间，除非它是浮动的，或者我们为它分配inline-block 。
float的第一个有效值在我们的例子中left ，我们使用float: left; 对于.floated_left ，所以我们打算将一个块浮动到我们的容器元素的left 。
列漂浮在左侧
是的，如果你看到的是.wrapper的父元素被折叠，那么你看到一个绿色的边框没有扩展，但它应该是正确的？ 有一段时间会回来，现在，我们已经有一列浮出left 。
来到第二栏，让它float这一个right
另一个队伍漂到右边
在这里，我们有一个300px宽的柱子，我们float在right ，当它漂浮在left ，除了第一个柱子以外，它还坐在left ，因为它left漂移，所以在right创build了空的水沟，因为有足够的在right的空间里，我们的right元素除了left元素之外还完美无缺。
父元素仍然崩溃，现在让我们来修复这个问题。 有很多方法可以防止父元素崩溃。
- 添加一个空的块级元素并使用
clear: both;父元素结束之前，其中包含浮动元素，现在这是一个便宜的解决scheme，以clear你的浮动元素将为你做的工作，但是，我会build议不要使用这个。
在.wrapper div结束前添加<div style="clear: both;"></div>
<div class="wrapper clear"> <!-- Floated columns --> <div style="clear: both;"></div> </div>
演示
那么，修复得很好，没有崩溃的父母，但它增加了不必要的标记到DOM，所以一些人build议，使用overflow: hidden; 在持有浮动子元素的父元素上按预期工作。
使用overflow: hidden; 在.wrapper
.wrapper { border: 3px solid green; overflow: hidden; }
演示
这为我们节省了一个元素，每次我们需要clear float但是当我用这个函数testing了不同的情况时，它在一个特定的例子中失败了，它在子元素上使用了box-shadow 。
演示 （无法看到所有四面的阴影， 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; ？
那么，这取决于，如果你想要一个响应式devise，当你想浮动的元素以一定的分辨率渲染一个在另一个之下时，你将使用这个值很多次。 对于那个float: none; 财产在那里起着重要的作用
很less有现实世界的例子，如何float是有用的..
- 我们已经看到的第一个例子是创build多个或多个列布局。
- 使用
img浮动内部p将使我们的内容stream动。
演示 （无浮动img ）
演示2 （ img漂浮在left ）
- 使用
float创build水平菜单 – Demo
还要浮动第二个元素，或者使用`margin'
最后但并非最不重要的，我想解释一下这个特殊情况，你只left float单个元素，但是你不float另一个元素，那么会发生什么？
假设我们删除了float: right; 从我们的.floated_right class ， div将会从最left呈现，因为它没有浮动。
演示
所以在这种情况下，你也可以把它float到left
要么
您可以使用margin-left ，它等于左侧浮动列的大小，即200px宽 。
你需要添加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的例子
你遇到了浮动错误（虽然我不知道是否在技术上是一个错误，因为有多less浏览器展示这种行为）。 以下是正在发生的事情：
在正常情况下，假设没有设置明确的高度，块级元素（如div）将根据其内容设置其高度。 父div的底部将超出最后一个元素。 不幸的是，在确定元素高度时，浮动元素会阻止父元素考虑浮动元素。 这意味着如果你的最后一个元素是浮动的，它不会像普通元素那样“拉伸”父元素。
空地
有两种常见的方法来解决这个问题。 首先是添加一个“清除”元素; 也就是说，浮动下面的另一个元素将强制父伸展。 所以添加下面的html作为最后一个孩子：
<div style="clear:both"></div>
它不应该是可见的，并通过使用明确：两者，你确保它不会坐在浮动元素旁边，但之后。
溢出：
第二种方法，这是大多数人（我认为）是首选的是改变父元素的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），其他块元素将忽略它，因为浏览器从正常的网页stream中删除浮动元素。 然后，因为浮动的div已经从正常stream程中移除，外部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如果你没有任何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 style="clear: both;"></div> ，但在</body></html>
只需复制并粘贴即可
这将工作熟练
