css3求教各位老师！

<!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}的原因？怎么影响的？不好意思啊，问题有点多，麻烦大家了！

天窗的蚂蚁

浏览 1361回答 1