三欄佈局

本文是學習中傳思客在慕課網開的課程《前端跳槽面試必備技巧》的學習筆記。課程地址：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的幾種方式===========================