三栏布局

本文是学习中传思客在慕课网开的课程《前端跳槽面试必备技巧》的学习笔记。课程地址：coding.imooc.com/class/evalu…

前端开发避免不了需要分列布局。常见的布局方式: float布局、Position定位、table布局、弹性(flex)布局、网格(grid)布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layout</title>
    <style media="screen">
      html *{
        padding: 0;
        margin: 0;
      }
      .layout article div{
        min-height: 100px;
      }
    </style>
  </head>
  <body>
    <!--浮动布局  -->
    <section class="layout float">
      <style media="screen">
      .layout.float .left{
        float:left;
        width:300px;
        background: red;
      }
      .layout.float .center{
        background: yellow;
      }
      .layout.float .right{
        float:right;
        width:300px;
        background: blue;
      }
      </style>
      <h1>三栏布局</h1>
      <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
          <h2>浮动解决方案</h2>
          1.这是三栏布局的浮动解决方案；
          2.这是三栏布局的浮动解决方案；
          3.这是三栏布局的浮动解决方案；
          4.这是三栏布局的浮动解决方案；
          5.这是三栏布局的浮动解决方案；
          6.这是三栏布局的浮动解决方案；
        </div>
      </article>
    </section>

    <!-- 绝对布局 -->
    <section class="layout absolute">
      <style>
        .layout.absolute .left-center-right>div{
          position: absolute;
        }
        .layout.absolute .left{
          left:0;
          width: 300px;
          background: red;
        }
        .layout.absolute .center{
          left: 300px;
          right: 300px;
          background: yellow;
        }
        .layout.absolute .right{
          right:0;
          width: 300px;
          background: blue;
        }
      </style>
      <h1>三栏布局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>绝对定位解决方案</h2>
          1.这是三栏布局的浮动解决方案；
          2.这是三栏布局的浮动解决方案；
          3.这是三栏布局的浮动解决方案；
          4.这是三栏布局的浮动解决方案；
          5.这是三栏布局的浮动解决方案；
          6.这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
      </article>
    </section>


    <!-- flexbox布局 -->
    <section class="layout flexbox">
      <style>
        .layout.flexbox{
          margin-top: 110px;
        }
        .layout.flexbox .left-center-right{
          display: flex;
        }
        .layout.flexbox .left{
          width: 300px;
          background: red;
        }
        .layout.flexbox .center{
          flex:1;
          background: yellow;
        }
        .layout.flexbox .right{
          width: 300px;
          background: blue;
        }
      </style>
      <h1>三栏布局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>flexbox解决方案</h2>
          1.这是三栏布局的浮动解决方案；
          2.这是三栏布局的浮动解决方案；
          3.这是三栏布局的浮动解决方案；
          4.这是三栏布局的浮动解决方案；
          5.这是三栏布局的浮动解决方案；
          6.这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
      </article>
    </section>


    <!-- 表格布局 -->
    <section class="layout table">
      <style>
        .layout.table .left-center-right{
          width:100%;
          height: 100px;
          display: table;
        }
        .layout.table .left-center-right>div{
          display: table-cell;
        }
        .layout.table .left{
          width: 300px;
          background: red;
        }
        .layout.table .center{
          background: yellow;
        }
        .layout.table .right{
          width: 300px;
          background: blue;
        }
      </style>
      <h1>三栏布局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>表格布局解决方案</h2>
          1.这是三栏布局的浮动解决方案；
          2.这是三栏布局的浮动解决方案；
          3.这是三栏布局的浮动解决方案；
          4.这是三栏布局的浮动解决方案；
          5.这是三栏布局的浮动解决方案；
          6.这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
      </article>
    </section>

    <!-- 网格布局 -->
    <section class="layout grid">
      <style>
        .layout.grid .left-center-right{
          width:100%;
          display: grid;
          grid-template-rows: 100px;
          grid-template-columns: 300px auto 300px;
        }
        .layout.grid .left-center-right>div{

        }
        .layout.grid .left{
          width: 300px;
          background: red;
        }
        .layout.grid .center{
          background: yellow;
        }
        .layout.grid .right{

          background: blue;
        }
      </style>
      <h1>三栏布局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>网格布局解决方案</h2>
          1.这是三栏布局的浮动解决方案；
          2.这是三栏布局的浮动解决方案；
          3.这是三栏布局的浮动解决方案；
          4.这是三栏布局的浮动解决方案；
          5.这是三栏布局的浮动解决方案；
          6.这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
      </article>
    </section>
  </body>
</html>

以上5种布局的方式那么他们的优缺点呢？

1、浮动布局脱离文档流，要做清除浮动。

为什么要清除浮动？

浮动起来的元素不会脱离文字流但是会脱离文档流不脱离文字流：display属性是inline和inline-block 的元素还是可以看见他的文字本身是inline属性脱离文档流的意思是正常元素看不见他了类似absolute属性内部改元素的样式display：inline-block;

(2)不清除浮动的效果：

border不能被撑开背景不能显示 margin设置值不能正确显示

(3)清除浮动的方法：

1.底下添加新的元素，应用 clear：both;
2.父级属性：overflow：hidden;
3.可以在外层套一个标签</p> 设置属性 clear:both;
4.添加一个after xxx:after { content: '', clear:both, dispaly: block, } "原理"：他就是在最后加了一个伪元素这个元素不是浮动的，他是抗浮动的，所以能看到浮动元素来定位自己的位置然后父级元素能看到这个伪元素所以他只是按照这个伪元素的位置来改变自己的宽高

"clear解释"：该属性的值指出了不允许有浮动对象的边情况，又对象左边不允许有浮动、右边不允许有浮动、不允许有浮动对象

5 、IE67触发haslayout ：wrapper{ zoom：1}

(4)为什么给父级元素设置overflow属性会去除浮动，具体说说内部机制

overflow属性相当于给父级元素定型了，必须有参数的
overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容
overflow除了(visible)会重新给他里面的元素建立块级格式化(block formatting context)
floats, position absolute, inline-block, table-cell和table-caption都不是块级样式，
所以才会用到clear来控制浮动
overflow也可以清除浮动是因为当在父级元素设置overflow时候，除了visible，就是只有auto, hidden或者scroll时候，也会建立新的块级格式给他的子元素, 从而起到清楚浮动效果

触发bfc的几种方式===========================

　  1.设置除 float:none 以外的属性值（如：left | right）就会触发BFC
　　2.设置除 overflow: visible 以外的属性值（如： hidden | auto | scroll）就会触发BFC
　　3.设置 display属性值为: inline-block | flex | inline-flex | table-cell | table-caption 就会触发BFＣ
　　4.设置 position 属性值为：absolute | fixed 就会触发BFC
　　5.使用 fieldset 元素（可以给表单元素设置环绕边框的html元素）也会触发BFC

2、绝对定位布局很快捷，设置很方便,缺点就是，绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流

3、table布局使用起来方便,兼容性也不存在问题，不利于搜索引擎抓取信息

4、flex布局比较强大,felxbox的缺点就是不能兼容IE8及以下浏览器

5、grid布局很强大，但是兼容性很差。

web 三栏布局

三栏布局

以上5种布局的方式那么他们的优缺点呢？

触发bfc的几种方式===========================