今天在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强制改动了位置。
