今天在MDN看到块格式化上下文有点不以为然，关键是它写的高深莫测，读不懂...
于是下午想试试圣杯布局的时候，终究还是逃不过它。🤣
这里不介绍圣杯布局的历史，这样的文章网上不知道多少篇，我来写写千篇一律中的亮点吧，哈哈。
这篇文章有配解释图，能让你更好理解如何一步一步搭建起来~
此处是圣杯的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
min-width: 550px;
}
* {
margin: 0;
padding: 0;
}
#container {
padding-left: 200px;
padding-right: 150px;
min-height: 300px;
}
#header,
.footer {
background-color: black;
height: 40px;
}
#center {
background-color: darkgrey;
min-height: 300px;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
background-color: blue;
min-height: 300px;
}
#container .column {
float: left;
}
#center {
width: 100%;
}
#right {
width: 150px;
background-color: brown;
min-height: 300px;
margin-right: -150px;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
</body>
</html>然后当我解读这段代码时候，我奇怪的是什么，left需要margin-left:-100%就提升所谓的高度了。。。
其实正常文档流中，如果你的center宽度小点，这三个元素是并排显示的，因而margin-left的负值(应该往左移动),还是100%，将移动最左侧了，所以覆盖了。
排列位置是center，left，right，left被移动走了，再margin-right就去右边了。
那为什么left还要借助postion，right却不用呢？
margin-left设置百分比是相对于父元素宽度的，这个宽度是不包括padding在内的，所以到达了与center重叠的地方
right是往右走，其实代码不唯一，你设置-100%，照样到末尾。
而 position: relative;,你还要注意left这边算最小宽度时候要算两遍，因为它原来的宽度是存在的。
那么为什么会提到刚刚我说的块格式化上下文，英文名就是BFC
我是看到了这篇介绍，我没看懂，感觉该作者语言组织不好。。。
没办法，于是我就去补了BFC的漏洞
当你有了理解之后，再来看本文❗
现在你终于知道为什么设置float之后，这些元素不会重叠，因为他们属于BFC并且BFC与浮动容器不重合，
可是为什么设置margin-left的负值(应该往左移动，反倒上去重合了呢？)-》margin-left强制改动了位置。
