据我了解,显示: block 将自动在新行中开始。为什么当在带有 display:block 的 div 中引入 float:left 时,盒子会折叠?这是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>
最佳答案
float 将元素移出页面的正常流程。如果包含元素内的流中没有任何内容,它将“崩溃”。
检查specs了解更多信息。
关于css - 为什么 float 会干扰显示 block 行返回,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6699017/