圣杯布局和双飞翼布局的好处
三栏布局,中间的内容栏最先加载和渲染。
两侧内容固定,中间内容随宽度自适应。
<style>
#content{
padding-left: 200px;
padding-right: 150px;
}
#content .column {
float: left;
}
#center {
background-color: #ccc;
width: 100%;
}
#left {
position: relative;
background-color: yellow;
width: 200px;
margin-left: -100%;
right: 200px;
}
#right {
background-color: red;
width: 150px;
margin-right: -150px;
}
</style>
<div id="content">
<div id="center" class="column">this is center</div>
<div id="left" class="column">this is left</div>
<div id="right" class="column">this is right</div>
</div>
为什么要把center放最上面?
因为中间栏要放在文档前面以优先渲染。放中间也是可以实现的,具体实现方式自己思考。
为什么不能用absolute?
float已经脱离文档流了,设置absolute会导致float失效。
为什么right的盒子设置margin-right为负宽度就可以不换行?
我们先思考一下float换行的原因,float换行的原因是由于上一行的空间已经无法容纳下一个盒子了,而元素页面展示的完全宽度等于margin + padding + border + width,设置margin-right为负宽度值就欺骗浏览器这个盒子只占0px,可以留在上一行。
<style type="text/css">
.col {
float: left;
}
#main {
width: 100%;
height: 200px;
background-color: #ccc;
}
#main-wrap {
margin: 0 190px;
}
#left {
width: 190px;
height: 200px;
background-color: #0000FF;
margin-left: -100%;
}
#right {
width: 190px;
height: 200px;
background-color: #FF0000;
margin-left: -190px;
}
</style>
<div id="main" class="col">
<div id="main-wrap">
this is main
</div>
</div>
<div id="left" class="col">
this is left
</div>
<div id="right" class="col">
this is right
</div>
双飞翼布局比圣杯布局简单,更好理解。
手写clearfix
.clearfix:after{
display:block;
height:0;
content:'';
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;
}
原理
clear:both;是清除浮动的关键。clear是CSS中的定位属性,规定元素的哪一侧不允许其他浮动元素。那么clear:both就是规定在左右两侧均不允许浮动元素,只在块级元素上起作用。(在IE8以下,还需要设置zoom:1;,会触发hasLayout,从而使元素获得清除浮动的特性)
还有其它方式嘛?
1、额外标签法,在最后一个浮动标签后,新加一个标签,给其设置clear:both;,跟上面最常见的伪元素写法其实本质相同。
2、添加overflow为hidden或scroll,内容多时会影响外观和体验。
3、利用BFC的“浮动元素也参与高度的计算”这一渲染规则。