<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
h1 {
font-size: 20px;
margin: 0;
color: #fff;
}
#page:after,
#page:before{
content:"";
display: table;
}
#page:after{
clear:both;
overflow: hidden;
}
#page {
margin-bottom: 20px;
background:black;
}
#header {
width: 100%;
background: green;
margin-bottom: 10px;
padding: 20px;
}
.main {
width: 60%;
padding: 20px;
background: orange;
float: left;
}
.sidebar {
width: 38%;
float: right;
background: #f36;
padding: 20px;
}
#footer {
width: 100%;
background: #36f;
padding: 20px;
clear:both;
}
#header,
.main,
.sidebar,
#footer {
-webkit-box-sizing:border-box;
-moz-？;
-o-？;
-ms-？;
？;
}
</style>
</head>
<body>
<div id="header"><h1>Header Content</h1></div>
<div id="page">
<div class="main"><h1>Main Content</h1></div>
<div class="sidebar"><h1>Sidebar Content</h1></div>
</div>
<div id="footer"><h1>Footer Content</h1></div>
</body>
</html>#page:after和#page:before在#page前面和后面插入一个空内容，为什么要把他们设置为display:table;？#page:after{clear:both;overflow: hidden;}，这里设置了clear:both，清楚浮动了，为什么#footer还要在设置一次clear:both呢？但如果我把#footer的clear:both去掉，他和#page(margin-bottom: 20px)之间的20px就没了？这里也不明白？由于#page里面的.main和.sidebar都浮动了，如果#page没有设置overflow:hidden，他就应该坍塌呀(我给#page加上背景色）,但是它并没有坍塌，是因为#page:after{overflow:hidden}的原因？怎么影响的？不好意思啊，问题有点多，麻烦大家了！
- 1 回答
- 0 关注
- 1360 浏览
添加回答
举报
0/150
提交
取消