.outer{border:5pxdottedrgb(214,129,137);边界半径：5px；宽度：450px；填充：10px；margin-bottom:40px;}.float{填充:10px;border:5pxsolidrgba(214,129,137,.4);rgba(233,78,119,.4);颜色：#fff；向左飘浮;宽度：200px；margin:020px00;}图1：文本环绕浮动的元素图像并上升到文本的高度。图2：没有足够的文本，边框无法达到浮动元素的预期高度。这是因为当我们浮动一个元素时，文本所在的框模型仍然是一个固定的高度，浮动元素缩短的空间就是文本。线框。这就是背景和边框出现在浮动元素后面的原因。以下是我们通常解决此类问题的两种方法。一种是使用clear-floatclearfixhack[1]，它通过在文本和图像下方插入一个元素并在两侧设置清晰的浮动来工作。另一种方法是使用overflow属性并使用其他值而不是默认的visible。.outer{overflow:auto;}图3：使用overflow:auto使框模型包含浮动溢出属性的工作原理是使用其他任何一个值代替初始值visible，从而创建一个BFC。也就是说，BFC的一个特点是它包含浮点数。BFC布局是一种迷你布局您可以将BFC视为网页中的迷你布局。一旦为元素创建了BFC，所有内容都包含在其中。如我们所见，它包含浮动元素，因此它不再超出框的底部。同时，BFC还产生了一些其他有用的行为。BFCPreventMarginCollapse了解边距折叠是另一个被低估的CSS技能。在下一个示例中，有一个灰色背景的div。这个div中有两个段落。外层div的底部边距为40px；每个段落还分别有20px的顶部和底部边距。.outer{背景颜色：#ccc;边距：0040px0;}p{填充：0;边距：20px020px0；背景色：rgb(233,78,119)；color:#fff;}由于p元素的边距和外部div的边距之间没有任何内容导致它们折叠，因此p段落最终与框的顶部和底部齐平。所以在p段落的上方和下方我们看不到任何灰色。图4：折叠的边距导致在灰色背景的框顶部和底部看不到灰色。.outer{背景颜色：#ccc;边距：0040px0；overflow:auto;}图5：使用BFC边距不会折叠BFC再次保持元素包含在内，防止其边距折叠或超出盒子模型。BFC防止内容环绕浮动元素。您还将熟悉BFC的这种行为，以及它如何在使用浮点数的多列布局中工作。如果一个项目创建了一个BFC，那么它不会环绕任何浮动元素，就像下面这个标记的例子：Iamafloatedelement。