前端－带header和footer的双栏布局

目标是实现如上图带header和footer的双栏布局，其中右侧sidebar是固定宽度，左侧content是自适应；

https://www.zybuluo.com/dengzhirong/note/169592

这里有双栏布局实现的3种方法：

1.左浮动＋margin

2.绝对定位＋margin-left

3.左浮动＋负margin

这里采用方法3，如下：

HTML

<div id="header">header</div>
<div id="main">
    <div id="content">content</div>
</div>
<div id="sidebar">sidebar</div>
<div id="footer">footer</div>

CSS

#header {
    background-color: gray;
    height: 50px;
}
#main {
    width: 100%;
    float: left;
}
#content {
    margin-right: 400px;
    
    background-color: red;
    height: 300px;
}
#sidebar {
    width: 400px;
    float: left;
    margin-left: -400px;
    clear: right;
    
    background-color: green;
    height: 100px;
}
#footer {
    clear: both;

    background-color: gray;
    height: 50px;
}

footer 中的 clear: both 作用是清除浮动

如果不加这句，footer会直接跑到header下方，被main和sidebar遮盖