两列定宽布局方式的一个前提就是两列的盒模型宽度相加不能大于父元素的宽度，否则你懂得......错位了。
测试html页：
<body>
<div id="header"> 头部 </div>
<div id="container">
<div class="mainBox"> 主要内容区域 </div>
<div class="sideBox"> 侧边栏 </div>
</div>
<div id="footer"> 底部信息 </div>
</body>
相关样式:
* {
margin: 0;
padding: 0;
}
#header, #footer {
width: 960px;
height: 30px;
border: 1px solid red;
}
#container {
width: 960px;
height: 250px;
margin: 10px 0;
}
.mainBox {
float: left;
width: 680px;
height: 250px;
color: #FFFFFF;
background-color: #333333;
}
.sideBox {
float: right;
width: 270px;
height: 250px;
color: #FFFFFF;
background-color: #999999;
}
我们可以发现，两列定宽的实现，只是将两部分一部分进行左浮动，一部分进行右浮动即可。以上的代码我们可以发现一个问题，如果在mainBox或者是sideBox中添加的内容超出了给元素所定的高度的时候，内容就会溢出，此时我的解决办法就是将他设置成为高度自适应的样式，然后为footer清除浮动。就是下面的样式：
* {
margin: 0;
padding: 0;
}
#header, #footer {
width: 960px;
height: 30px;
border: 1px solid red;
}
#container {
width: 960px;
/*height: 250px;*/
margin: 10px 0;
}
.mainBox {
float: left;
width: 680px;
/*height: 250px;*/
color: #FFFFFF;
background-color: #333333;
}
.sideBox {
float: right;
width: 270px;
/*height: 250px;*/
color: #FFFFFF;
background-color: #999999;
}
/*这种清除浮动的方式，会使container和footer之间的margin消失*/
#footer {
clear: both;
}
这样的话，就变为了高度自适应的版本，高度会因为他内容的填充而改变。上面的注释中也写到了，在 footer 上添加清除浮动的话，会使 container 和 footer 之间的间隔消失，所以就有了以下的改良办法：
/*#footer {
clear: both;
}
*/
#container::after {
display: block;
visibility: hidden;
font-size: 0;
line-height: 0;
clear: both;
content: "";
}
我的理解就是， 创建了一个 after 伪元素， display 标识为盒子，不可见，填充内容为空，在这个伪元素上添加清除浮动。
css 小白，刚开始学习 css ,所以不对的请指出...虽然不太会有人看
时间： 2024-11-07 14:46:37