Question

据我所知，display：block将自动以新行开头。为什么在浮点数时盒子会崩溃：左边是在带有display：block的div中引入的？这是fiddle，位于代码

下方

#wrapper {
width:300px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px solid #a39b8b;
background-color:#fff;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
box-shadow: 0px 0px 10px #888;}
#header { width: 100%; display: block; }
#logo { width: 100px; height: 145px; background: #fde; }
#slogan {
display: block; background: #f9ebcd; height: 35px; -moz-box-shadow: 0px 3px 10px #888;
-webkit-box-shadow: 0px 3px 10px #888; box-shadow: 0px 3px 10px #888; border: 1px solid red;
}
.left { float:left;}



<div id="wrapper">
<div id="header">
     <div id="logo"class="left">left</div>
</div>
<div id="slogan">slogan</div>

Answer 1

Floats将元素移出页面的正常流程。如果在中没有任何东西留在包含元素内的流中，它将“崩溃”。

查看specs了解详情。

Answer 2

我建议您熟悉clearfix。它让生活更轻松。

您的示例（已修订）：http://jsfiddle.net/HkHTk/4/

Answer 3

That's just what happens with float.

基于浮动的布局的一个常见问题是浮动的容器不希望伸展以容纳浮动。如果你想在所有花车周围添加一个边框（例如，容器周围的边框），你必须以某种方式命令浏览器一直拉伸容器。

修复：

#wrapper {
    overflow: auto;
}

演示：http://jsfiddle.net/mattball/CjXNW/

Answer 4

您需要使用CSS clear属性清除浮动。

Answer 5

你想做什么？如果您希望标语框出现在徽标框下方，则需要添加清晰：两者;到#slogan代码。

为什么浮动会干扰显示块行返回

5 个答案: