常见的布局方法以及它们的优缺点

• Flexbox - 弹性布局

  • 优点：css3新特性，简单快捷，目前主流布局方式，解决旧特性定位时产生元素脱离文档流问题。
  • 缺点：仅支持 IE9 以上浏览器。

     <section class="flex-wrap">
         <div class="left">left</div>
         <div class="center">center</div>
         <div class="right">right</div>
     </section>
  

     .flex-wrap {
     display: flex;
     /* height: 100px; */
     /* 不设置高度则自适应 */
     }
     .flex-wrap .left, 
     .flex-wrap .right {
     width: 200px;
     }
     .flex-wrap .center {
     flex: 1;
     }
  

• Grid - 网格布局(未来趋势)

  • 优点：可将网页划分成不同的网格，任意组合不同布局，可以实现以前只能通过诸如Bootstrapcss第三方框架的布局效果。
  • 缺点：css 实验性新特性，在浏览器中还没有得到广泛的支持。

    <section class="grid-wrap">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </section>
  

     .grid-wrap {
         display: grid;
         grid-template-rows: 100px;  /* 设置行高，不设置则自适应 */
         grid-template-columns: 200px auto 200px;  /* 设置列宽，也可使用百分比 */
         }
  

• Floats - 浮动布局

  • 优点：比较简单，兼容性好；
  • 缺点：浮动会使元素脱离文档流，容易出现高度塌陷等问题，需做好清理浮动。

     <section class="float-wrap">
         <div class="left">left</div>
         <div class="right">right</div>
         <div class="center">center</div>
         <!-- ⚠️注意，没浮动的div应放再最后，left左浮动完后，行剩余空间会被center占满 -->
     </section>
  

     .float-wrap>div {
         height: 200px;
         }
     .float-wrap .left {
         float: left;
         width: 200px;
         }
     .float-wrap .right {
         float: right;
         width: 200px;
         }
  

  • 以上方式虽简单，但仅适合所有元素等高的情况，因为元素浮动会脱离文档流，所以不等高可能会出现如下几种状况；

  • 未浮动元素高于浮动元素，造成围绕效果。
  • 解决方案：未浮动元素创建 BFC，以下是创建BFC的五种方式。

  • float 除了none以外的值
  • overflow 除了visible 以外的值（hidden，auto，scroll ）
  • display (table-cell，table-caption，inline-block, flex, inline-flex)
  • position值为（absolute，fixed）
  • fieldset元素

  • Positioning - 定位布局

    • 优点：简单直接；
    • 缺点：绝对定位同float布局一样会脱离文档流，高度塌陷问题。

      <section class="position-wrap">
          <div class="left">left</div>
          <div class="center">center</div>
          <div class="right">right</div>
      </section>
    

      .position-wrap>div {
      position: absolute;
      }
      .position-wrap .left {
      width: 200px;
      left: 0;
      }
      .position-wrap .right {
      width: 200px;
      right: 0;
      }
      .position-wrap .center {
      left: 200px;
      right: 200px;
      }
      ```
    

  • 出现高度塌陷问题，可创建BFC来解决，直接给父容器添加 overflow: auto; 或 hidden、scroll等。

     .position-wrap {
         overflow: auto;
         /* 或 hidden、scroll 等 */
     }
  

• Table layout - 表格布局

  • 优点：兼容性最佳
  • 缺点：对 seo 不友好，且列高不能自适应，所有列高会保持一致。（且很少有人使用table布局了）

     <section class="table-wrap">
         <div class="left">left</div>
         <div class="center">center</div>
         <div class="right">right</div>
     </section>
  

     .table-wrap {
     display: table;
     width: 100%;
     }
     .table-wrap>div {
     display: table-cell;
     }
     .table-wrap .left,
     .table-wrap .right {
     width: 200px;
     }
  

• 清除浮动的四种方法(推荐使用前两种，生产环境推荐第二种。)

1. 父容器添加 overflow

  	        .container {
  	            overflow: hidden;
  	            /* 或 auto、scroll 等非默认 visible 值*/
  	        }

2. 通过伪元素清除浮动

• 通用样式添加 .clearfix 及其伪类样式；
• 给需要清除浮动的元素class添加 clearfix 类；

         /* For modern browsers */
         .clearfix:before,
         .clearfix:after {
         　　content:"";
         　　display:block;
         }
         .clearfix:after {
         　　clear:both;
         }

         /* For IE 6/7 (trigger hasLayout) */
         .clearfix {
         　　zoom:1;
         }

3. 父容器内添加空元素

• 父容器底部添加空元素；
• 添加样式 clear: both；
  缺点：增加冗余标签，违背了语义网的原则。

         <section>
         <div style="float: left">....<div>
         ...
         <div style="clear: both;"></div>
         <section>

4. 浮动父容器

缺点：影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。