header是块元素为什么作为块元素的section的内容会飘到header里面，下面的footer会飘到了section里面呢？
<!DOCTYPE html>
<html>
<head>
<!-- 1、
2、
3、
采用字体：Geneva,Arial,Helvetica,sans-serif;
基本背景颜色:#CCCCCC
最大宽度：900px
边框：5px, 实线，#ffffff
内容背景颜色：#888
header部分背景颜色：#F47D31 ------h1
主header部分高度：80px
主header部分字体大小：72px
主footer部分高度：50px
nav部分宽度：25%-------h3
article部分宽度：50%
aside部分宽度：25%，斜体font-style: italic;
h1:72px
h2:24px;
h3:18px
-->
<meta charset="utf-8">
<title></title>
<style>
.content{
width:900px;
background:#888;
font-family:Geneva,Arial,Helvetica,sans-serif;
border:5px #fff solid;
margin:0 auto;
text-align:center;
}
header{
width:100%;
height:80px;
font-size:72px;
background-color:#F47D31;
}
nav {
float:left;
width:25%;
}
nav h3 {
font-size:18px;
}
artical{
width:50%;float:left;
}
section{
width:100%;
}
aside{
width:25%;
float:right;
}
footer{
height:50px;
font-size:18px;
background-color:#F47D31;
}
</style>
</head>
<body>
<div class="content">
<header>
Header
</header>
<section>
<nav>
<h3>link1</h3>
<hr/>
<h3>link2</h3>
<hr/>
<h3>link3</h3>
<hr/>
</nav>
<artical>
<div>
Artical Header
</div>
<p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.</p>
<p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.</p>
<div>
Artical Footer
</div>
<div>
Artical Header
</div>
<p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio</p>
<div>
Artical Footer
</div>
</artical>
<aside>
<p>Aside</p>
</p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio rhoncus</p>
</aside>
</section>
<footer>
Footer
</footer>
</div>
</body>
</html>
慕粉39006582回答
-
丶前男友
呃。。。你为什么要用text文本复制这代码呢- =，我们看着多累啊，那里不是有代码语言编辑的么~简单一句话，section没有清除浮动~PS：看的我好累。。。 -
丶前男友
<section> <nav></nav> <artical></artical> <aside></aside> </section>上面是你的代码用clear：both应该如下这么写：<section> <nav></nav> <artical></artical> <aside></aside> <div style="clear:both"></div> </section>
随时随地看视频慕课网APP
Html/CSS
Html5