一左右布局
1.利用float，注意父级元素要清除浮动clearfix
<div class="box clearfix">
<div class="box1"></div>
<div class="box2"></div>
</div>
.box{border:1px solid blue;}
.box1{width:50%;height:200px;background:red;float:left;}
.box2{width:50%;height:200px;background:black;float:left;}
.clearfix::after{content:'';display:block;clear:both;}
image.png
2.利用内联块元素,注意内联元素排在一起会有4px的间隙，在父级元素上使用font-size=0可以解决，另外当元素display：inline-block时需要使用vertical-align:top来解决有行高排列问题
image.png
.box{border:1px solid blue;font-size:0;}
.box1{width:50%;height:200px;background:red;display:inline-block;}
.box2{width:50%;height:200px;background:black;display:inline-block;}
3.利用绝对定位布局
.box{border:1px solid blue;position:relative;}
.box1{width:50%;height:200px;background:red; position:absolute; left:0;top:0;}
.box2{width:50%;height:200px;background:black;position:absolute; right:0;top:0;}
4.flex布局
.box{ border:1px solid blue;display:flex;}
.box1{width:50%;height:200px;background:red;}
.box2{width:50%;height:200px;background:black;}
image.png
二、左中右布局（三列布局）
1.三列水平布局，如果列的宽度都是固定的，实现方式与上面两列布局相似，使用浮动即可达到效果。
<div class="container">
<div class="leftbox">左侧列</div>
<div class="midbox">中间列</div>
<div class="rightbox">右侧列</div>
</div>
.container{
width:150px;
height:150px;
border:1px solid }
.leftbox {width: 50px;height:100%;float: left;background:red ;}
.midbox {width: 50px;float: left;height:100%;background:blue;}
.rightbox {width: 50px;float: right;height:100%;background:green;}
image.png
leftbox和midbox设置左浮动，rightbox设置右浮动。但关键的是，三个子元素的总宽度不能大于或者等于父元素的宽度。
2 float+margin 方法
<style>
*{padding:0;margin:0;border: 0;}
.box{width:600px;overflow: hidden;}
.div1{width:80px;height:300px;background-color: red;float: left;}
.div2{height:300px;background-color: yellow;margin: 0px 100px; }
.div3{width:80px;height:300px;background-color: black;float: right;}
</style>
<div class="box">
<div class="div1"></div>
<div class="div3"></div>
<div class="div2"></div>
</div>
千万要注意！！！当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥，所以div3和div2应该换个位置
3.flex布局
<style>
.box{display: flex;width:400px;height:300px;}
.div1{width:100px;height:300px;background-color: red;}
.div2{flex: 1;height:300px;background-color: yellow}
.div3{width:50px;height:300px;background-color: black}
</style>
4.绝对定位
<style>
*{padding:0;margin:0;}
.box{position: relative;width:400px;height:300px;}
.div1,.div2{position: absolute;width:50px;height:300px;}
.div1{left:0px;background-color: red;}
.div2{right:0px;background: black;}
.div3{height:300px;background-color: yellow;}
</style>
5.圣杯布局
<section class="layout grail">
<h1>圣杯布局</h1>
<article class="left-center-right">
<div class="center">
1.这是三栏布局的圣杯布局解决方案；
2.这是三栏布局的圣杯布局解决方案；
3.这是三栏布局的圣杯布局解决方案；
4.这是三栏布局的圣杯布局解决方案；
5.这是三栏布局的圣杯布局解决方案；
6.这是三栏布局的圣杯布局解决方案；
7.这是三栏布局的圣杯布局解决方案；
8.这是三栏布局的圣杯布局解决方案；
9.这是三栏布局的圣杯布局解决方案；
</div>
<div class="left"></div>
<div class="right"></div>
</article>
</section>
<style>
.layout.grail .left-center-right {
padding: 0 300px;
min-width: 304px;
}
.layout.grail .left-center-right>div {
float: left;
min-height: 100px;
}
.layout.grail .center {
background: yellow;
}
.layout.grail .left {
margin-left: -100%;
width: 300px;
background: red;
position: relative;
left: -300px;
}
.layout.grail .right {
margin-left: -300px;
width: 300px;
background: blue;
position: relative;
right: -300px;
}
</style>
image.png
6.双飞翼布局
<section class="layout ued">
<h1>双飞翼布局</h1>
<article class="left-center-right">
<div class="wrap">
<div class="center">
1.这是三栏布局的双飞翼布局解决方案；
2.这是三栏布局的双飞翼布局解决方案；
3.这是三栏布局的双飞翼布局解决方案；
4.这是三栏布局的双飞翼布局解决方案；
5.这是三栏布局的双飞翼布局解决方案；
6.这是三栏布局的双飞翼布局解决方案；
7.这是三栏布局的双飞翼布局解决方案；
8.这是三栏布局的双飞翼布局解决方案；
9.这是三栏布局的双飞翼布局解决方案；
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
</section>
<style>
.layout.ued .left-center-right>div {
float: left;
}
.layout.ued .wrap {
margin-left: 300px;
margin-right: 300px;
}
.layout.ued .center {
background: yellow;
}
.layout.ued .left {
background: red;
min-height: 100px;
width: 300px;
margin-left: -100%;
}
.layout.ued .right {
background: blue;
min-height: 100px;
width: 300px;
margin-left: -300px;
}
</style>
image.png
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局：
不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：圣杯布局为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div；而双飞翼布局为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
网友评论