最近想起一个问题“怎么实现左侧固定，右侧内容自适应”。
flex布局的写法
css
<style type="text/css">
.parent { display: flex;}
.one {
flex:0 0 900px;
width: 900px;
background-color: blue;
height: 200px;
margin-right: 10px;
}
.two { flex: 1; height: 200px; background-color: red; }
</style>
html
<div class="parent">
<div class="one"></div>
<div class="two">第二种方法</div>
</div>
传统的写法
.one {
float: left;
height: 100px;
width: 900px;
background-color: blue;
margin-right:10px;
}
.two {
overflow: auto;
height: 200px;
background-color: red;
}
但是flex布局只支持IE10以上的版本关于flex布局更多知识点击这里
flex布局的支持情况.png
盒子之间的布局visual formatting
脱离正常流normal flow的盒子的布局
absolute布局上下文下的布局
float布局上下文下的布局
正常流normal flow下的盒子的布局
BFC（Block Formatting Contexts，块级格式化上下文）布局
IFC（Inline Formatting Contexts，内联格式化上下文）布局
FFC(Flex Formatting Contexts，自适应格式化上下文）布局
table布局上下文下的布局
css grid布局上下文下的布局
关于BFC
在这里想多说一些关于BFC布局，FFC布局可以查看阮一峰老师写的博客。关于BFC的原则，张鑫旭在其博客中提到过“BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。”
什么时候会触发BFC呢
什么时候会触发BFC呢？常见的如下：
float的值不为none。
overflow的值为auto,scroll或hidden。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
这不难理解
下面给出一个例子
我想要的效果是图片和文字成两栏，中间有点间距
image.png
传统的流体布局
.one {
float: left;
margin-right:10px;
}
.two {
background-color:#cad5eb;
}
这样子写有问题的，根本没有达到预期效果。所以我们得把它BFC
image.png
.one {
float: left;
margin-right:10px;
}
.two {
background-color:#cad5eb;
overflow: hidden
}
发现有什么不同了吗
想起自己以前为每个块级元素设置padding、margin，重用性超级差。望以后能写出高质量的样式代码
