先说结论。
1、bfc元素布局不会收到float元素影响，但是float元素会躲开bfc元素，而且连margin都会躲开。
2、bfc元素如果将margin计算在内一定会独占一行，适合做自适应浏览器窗口大小的div。而float元素默认大小刚好包裹内容，更适合固定大小的div。
在实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化中，我打算使用浮动元素去做固定宽度的一方，用bfc元素来进行自适应变化，并用margin来将浮动元素位置留出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox align 0 — starting code</title>
<style>
.left{
overflow:auto;
margin-right:200px;
height:200px;
background-color:blue;
}
.right{
float:right;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div class="right">测试文字</div>
<div class="left"></div>
</body>
</html>
这个代码实现了上述功能，要注意在body中我先写了float的右div，后写了bfc特性的左div，而不是正常的从左到右。这是因为float元素在浮动时不会去占用别的元素的margin。但是如果先渲染float元素让这个元素先把地方给占了，后渲染的bfc也无法改变float元素位置了。