三栏布局

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

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

<!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种布局的方式那么他们的优缺点呢？

一、浮动布局脱离文档流，要作清除浮动。前端

为何要清除浮动？面试

浮动起来的元素不会脱离文字流可是会脱离文档流不脱离文字流：display属性是inline和inline-block 的元素仍是能够看见他的文字自己是inline属性脱离文档流的意思是正常元素看不见他了相似absolute属性内部改元素的样式display：inline-block;浏览器

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

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

(3)清除浮动的方法：oop

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
复制代码

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

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

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

五、grid布局很强大，可是兼容性不好。

web 三栏布局

三栏布局

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

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