css关于圣杯布局的一些问题

最近看一些圣杯和双飞翼布局，在掘金上面看到了一篇这样的博客，经典的圣杯布局，和双飞翼布局， 考点是什么

其中在给left设置margin-left:-100%的时候，我不太理解问什么，left元素的位置在center的位置，现在搞懂了，特此记录一下，

首先浮动的元素，会在一行进行展示，但是因为center的宽度设置了100%，所以，父级元素的宽度已经不能满足子级元素的宽度的总和了，导致left和right会在另一行显示，所以我们在分析margin-left的时候可以看做是在一行，这样就比较容易分析了，

 

 

当我们给left设置和其宽度一样的margin-left的时候，可以看到，left布局又和center布局在同一行了，但是如果我们设置的margin-left比其宽度小的时候，发现left布局还是在center下面的，

 

我们来分析一下为什么会这样，首先当我们设置margin-left大于或者等于width的时候，虽然此时center的宽度还是等于main的宽度的，但是由于left设置了margin-left，最终使left居于center的上面，此时left左移动的距离正好是其宽度，

但是如果margin-left的值比left元素的宽度小一点点，就会造成这样的问题，