写本文主要是为了解决利用CSS的流体特性实现自适应的两栏/三栏布局
#先来了解一下什么是BFC
1.BFC的定义
全称Block Formatting Context，中文直译为块级格式上下文。BFC就是一种布局方式，在这种布局方式下，盒子们自所在的containing block顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。两个相邻的BFC之间的距离由margin决定。在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”。
由上可知，垂直相邻盒子margin合并的解决办法：就是给这两个盒子也创建BFC。通俗一点，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部
2.如何创建BFC
float属性不为none
浮动元素本身BFC化，然而浮动元素有破坏性和包裹性，失去了元素本身的流体自适应性，因此，无法用来实现自动填满容器的自适应布局。不过，其因兼容性还算良好，与堆积木这种现实认知匹配，上手简单，因此在旧时代被大肆使用，也就是常说的“浮动布局”，也算阴差阳错开创了自己的一套布局。
overflow不为visible(可以是hidden、scroll、auto)
不像浮动和绝对定位，也就是溢出剪裁，本身还是个很普通的元素。因此，块状元素的流体特性保存相当完好
position为absolute或fixed
脱离文档流了
display为inline-block、table-cell、table-caption
没有过多接触，如果有用到再过来补充
3.BFC的作用
1) 清除内部浮动
我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。
2) 垂直margin合并
在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。我在另外一篇博文里面有提到折叠外边距的计算规则
3) 创建自适应两栏布局
下面就是 具体介绍自适应的两栏布局及扩展的三栏布局
4.BFC自适应布局优势
- 摘自张鑫旭网站
自适应内容由于封闭，更健壮，容错性强。比方说，内部clear:both不会与兄弟float产生矛盾。而纯流体布局，
clear:both会让后面内容无法和float元素在一个水平上,产生布局问题自适应内容自动填满浮动以为区域，无需关心浮动元素宽度，可以整站大规模应用。而纯流体布局，需要大小不确定的
margin/padding等值撑开合适间距，无法CSS组件化。
#两栏自适应布局
//第一种方式
1. 给父级设置样式 overflow:auto; 形成BFC，形成独立区域
2. 给 写文字的div设置样式 margin-left: 230px;
<head>
<style type="text/css">
body{
background-color: #b2b0b0;
}
.flow-box {
width: 500px; background-color: #eee; overflow:auto; resize:horizontal;
}
.flow-content {
margin-left: 230px;
}
</style>
</head><body>
<div class="flow-box">
<img src="img/blogs.jpg" width="220" height="241" style="float: left;">
<div class="flow-content">
塞了个借口胜利而公开很高可能是佛写得，首付款你的说法是客服会送到附近
是会计当官会见到访有天赋的是单镜反光设计开发的啊我发深刻搭街坊代码发布爵士鼓速度发货考试的价格是大家看过阿哥
塞了个借口胜利而公开很高可能是佛写得，首付款你的说法是客服会送到附近
塞了个借口胜利而公开很高可能是佛写得，首付款你的说法是客服会送到附近
塞了个借口胜利而公开很高可能是佛写得，首付款你的说法是客服会送到附近
塞了个借口胜利而公开很高可能是佛写得，首付款你的说法是客服会送到附近
是会计当官会见到访有天赋的是单镜反光设计开发的啊我发深刻搭街坊代码发布爵士鼓速度发货考试的价格是大家看过阿哥
</div>
</div>
</body>//第二种方式
1. 给父级设置样式 overflow:hidden; 形成BFC，形成独立区域
2. 给 写文字的div设置样式文字溢出隐藏样式
3. 给图片设置float: left; margin-right: 20px; 样式
<style type="text/css">
body{
background-color: #b2b0b0;
}
.flow-box {
background-color: #eee; overflow:hidden; resize:horizontal;
height:300px;
}
.flow-content {
background-color: #beceeb; overflow: hidden;
}
img {
float: left; margin-right: 20px;
}
</style>两种布局均显示结果如下两图所示：
可以看到，整个大的块右下角有一个三角形样子的东西，可以拖动它水平拉伸，可以看到，不管什么时候左边图都是不动的，而且文字会根据块的大小铺满整个右边部分，而不会显示在图片底下，这就是自适应两栏布局
#三栏自适应布局
/*第一种：浮动式三栏布局：双飞翼布局*/
.box1 .left{
width:200px;
background-color: #beceeb;
height:300px;
float: left;
margin-left: -100%;
}
.box1 .main{
width:100%;
height:300px;
float: left;
}
.box1 .content{
height:300px;
background-color: #E77F24;
margin: 0 200px;
}
.box1 .right{
width:200px;
height:300px;
background-color: #b2b0b0;
float: left;
margin-left: -200px;
}
<!--浮动式三栏布局布局:双飞翼布局-->
<div class="box1">
<div class="main">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div> /*第二种：定位式三栏布局*/
.box2 div{
position: absolute;
}
.box2 .left{
left:0;
width: 200px;
height:200px;
background: red;
}
.box2 .center{
left: 200px;
right: 200px;
height:200px;
background: yellow;
}
.box2 .right{
right:0;
width: 200px;
height:200px;
background: blue;
}
<!--定位式三栏布局-->
<div class="box2">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>/*flex三栏布局*/
.box3{
display: flex;
height:200px;
}
.box3 .left,.box3 .right{
width:200px;
background-color: #88499C;
}
.box3 .center{
flex: 1;
background-color: #E77F24;
}
<!--flex的三栏布局-->
<div class="box3">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>/*流体布局*/
.box4 .left{
float: left;
height:200px;
width:100px;
background-color: #E77F24;
}
.box4 .right{
width:100px;
height:200px;
float: right;
background-color: #88499C;
}
.box4 .main{
margin:0 120px;
height:200px;
background-color: #346367;
}
<!--流体布局-->
<div class="box4">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>/*BFC三栏布局*/
.box5 .left{
float: left;
width:100px;
height:200px;
background-color: #E77F24;
margin-right:20px;
}
.box5 .right{
float: right;
width:100px;
height:200px;
background-color:#88499C;
margin-left:20px;
}
.box5 .main{
height:200px;
overflow: hidden;
background-color: #346367;
}
<!--BFC三栏布局-->
<div class="box5">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div> /*圣杯布局*/
.box6{
margin-left:120px;
margin-right:120px;
}
.box6 .left{
float: left;
width:100px;
height:300px;
margin-left:-100%;
position: relative;
/*left:120px;*/
background-color: #E77F24;
}
.box6 .right{
float: left;
width:100px;
height:300px;
margin-left:-200px;
position: relative;
right:-120px;
background-color: #346367;
}
.box6 .main{
float: left;
width:100%;
height:300px;
background-color: #88499C;
}
<!--圣杯布局-->
<div class="box6">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>/*table布局*/
.box7{
display: table;
width:100%;
}
.box7 .left,.right,.main{
display: table-cell;
}
.box7 .left{
width:200px;
height:300px;
background-color: #88499C;
}
.box7 .right{
width:200px;
height:300px;
background-color:#E77F24;
}
.box7 .main{
background-color: #346367;
}
<!--table布局-->
<div class="box7">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>布局显示结果如下两图所示：
752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
