css主流布局--圣杯布局

css主流布局–圣杯布局

圣杯布局是来源于该布局效果类似圣杯而得名，简单的来说，就是指三行三列的布局。
圣杯布局的核心在于中间主体部分：左右定宽+中间自适应的布局效果

HTML

  <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>

CSS

 .left,
        .right,
        .center{
            height: 300px;
        }
        .left,
        .right{
            width: 300px;
        }
        .left{
            background-color: brown;
            float: left;
        }
        .center{
            background-color: darkgoldenrod;
            margin-left: 300px;
            margin-right: 300px;
        }
        .right{
            background-color:purple;
            float: right;
          }

从图中可以看出，left浮动，而center没有浮动，所以center会向前移动占据left的位置，所以center自适应宽度与left在同一水平上。而此时兄弟元素right没有浮动，当前一个元素没有浮动，而后一个元素浮动的时候，浮动的元素是不允许超过前面的元素的，所以是前后排列。
因此，解决方法就是将right元素移到center的前面去，那么，前面两个元素都浮动，center就会自然移动占据剩余位置。
HTML

<div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>

在实际开发的过程中，这种情况是有问题的，我们浏览器在渲染时是按照顺序的，我们一般会将重要的数据放在center中，这样会及时显示内容。因此，最好的是将center放在left的前面，但是布局上就不能满足了。

圣杯布局的解决方案

在大型网站中可能出现的问题及其解决方法。
HTML

<div class="parent">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

里面涉及一个知识，就是高度坍塌，这种情况一般出现在，包裹了子级元素的父级元素中，一，若子级元素的内容为空，则父级元素的高度坍塌，当在自己中加入文本后，父级元素的高度将被撑开，使得父级元素的高度与文本高度相同。二，若给子级元素设置为浮动，由于子级元素脱离文档流无法撑开父级元素，这样父级元素的高度也会坍塌。
CSS:

 .left,
        .right,
        .center{
            height: 300px;
            float: left;
        }
        .left,
        .right{
            width: 300px;
        }
        .left{
            background-color: brown;
        }
        .center{
            background-color: darkgoldenrod;
        }
        .right{
            background-color:purple;
          }

那么我们需要给父级元素设置高，我将父级元素设置为300px。
此时，由于center元素是自适应宽度为0。
接下来进行分析，设置center宽度为100%后，

    .center{
            width: 100%;
            background-color: darkgoldenrod;
        }

浮动的元素，在一行占满后会自动换行

现在，将parent元素两边空出300px,
CSS:

 .parent{
            height: 300px;
            margin-left: 300px;
            margin-right: 300px;
        }

疑问，为什么此时，left元素的左边也空白300px，因为包裹在parent父级元素里面吗？

后面的布局原理有点不明白，后续继续更新。
完整CSS代码

 .parent{
            height: 300px;
            margin-left: 300px;
            margin-right: 300px;
        }
        .left,
        .right,
        .center{
            height: 300px;
            float: left;
        }
        .left,
        .right{
            width: 300px;
        }
        .left{
            background-color: brown;
            margin-left: -100%;
            position: relative;
            left: -300px
        }
        .center{
            width: 100%;
            background-color: darkgoldenrod;
        }
        .right{
            background-color:purple;
            margin-left:-300px;
            position: relative;
            right: -300px;
          }