先贴代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>两栏</title>
<style media="screen">
html,body,p{
margin: 0;
padding: 0;
}
#header,#footer{
height: 40px;
background: red;
}
#content{
overflow: auto;
}
#content .main{
overflow: auto;
background: pink;
}
#content .test{
background: yellow;
}
#content .aside{
background: #aaa;
width: 300px;
float: left;
}
</style>
</head>
<body>
<div id=header>
header
</div>
<div id=content>
<div class="aside">aside</div>
<div class="main">
我是main
我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main
我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main
我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main
我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main
我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main
我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main
<div class="test">
我是main
我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main
我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main
我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main
我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main
我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main
我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main
</div>
</div>
</div>
<div id=footer></div>
</body>
</html>
问题
如果将content块中main由div改为p标签，并且删去test块，则依然为两栏布局。效果同两个div并列。
aside为div，main为p
但此时若不删去test块，test块就会占据一整行：
mian作为p标签包含div的情况
若是main为div，则不管aside周围是不是文字（float：left；会出现文字环绕浮动的效果），都可以实现两栏布局：
div包含文本和div
div包含div
我们知道此时形成两栏布局的原因是main形成了BFC，而main形成BFC的原因是overflow：auto；此时main已经设置了overflow：auto；所以main中的div已经包含在main形成的BFC中，所以两栏布局依然可以实现。而p标签并没有这种效果。
