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

据我所知，display:block将自动在新行中开始。为什么在display:block的div中引入float:left时，框会折叠？下面是一个和下面的代码

#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>

#包装器{
宽度：300px；
保证金：0px自动；
文本对齐：左对齐；
填充：15px；
边框：1px实心#a39b8b；
背景色：#fff；
-moz盒阴影：0px 0px 10px#888；
-网络工具包盒阴影：0px 0px 10px#888；
盒影：0px 0px 10px#888；}
#标题{宽度：100%；显示：块；}
#标志{宽度：100px；高度：145px；背景：#fde；}
#口号{
显示：块；背景：#f9ebcd；高度：35px；-moz盒阴影：0px 3px 10px#888；
-webkit盒影：0px 3px 10px#888；盒影：0px 3px 10px#888；边框：1px纯红；
}
.left{float:left；}
左边
标语

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

修复方法：

#wrapper {
    overflow: auto;
}

---

演示：

浮动将元素移出页面的正常流程。如果包含元素的流中没有任何内容，它将“崩溃”

---

查看以了解更多信息。

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

我建议您熟悉。它使生活更容易

---

你的例子（修订版）：

你想做什么？如果您希望标语框显示在徽标框下方，则需要添加清晰的：两者；到#标语代码