前端面试题-页面布局

题目：
假设高度已知，写出三栏布局，其中左右两栏各为300px,中间宽度自适应 。

基础代码如下

    
    

      

      

      
      
float
    
    
    

      

      
flex
      

    
    
    

      

      
position
      

    
    
    

      

      
table
      

    
    
    

      

      
grid
      

    
  

---

一、浮动float解决方案

• 优点：兼容性好

• 缺点：会带来高度塌陷、影响周围元素布局等问题，需要清除浮动

  清除浮动的方法：
  清除浮动的原理主要是开启该元素的BFC(块级格式化环境)-BFC的特点之一是：计算BFC的高度时，浮动元素会参与计算。开启元素BFC的方法有
  1. 设置该元素的float不为none（可为left/right）
  2. 设置该元素的position不为static和relative(可为fixed/absolute)
  3. 设置该元素的overflow不为visible(可为hidden/auto)
  4. 设置该元素的display为inline-box，table(与table相关的几个值，比如table-cell)
  
  一般我们使用css中的clear属性清除浮动
  .clearfix::before,
  .clearfix::after{
      content:  '';
      display: table;
      clear: both;
  }
  

---

二、position定位解决方案

优点：简便
缺点：设置绝对定位的元素会脱离文档流，对子元素以及周围元素的布局影响较大。

---

三、flex盒模型解决方案

优点：为布局而生的属性，解决了flex和position方案的弊端，且移动端支持性好
缺点：IE8及以下不支持

---

四、table布局解决方案

优点：兼容性好
缺点：三个元素的高度会与当中高度最大的保持一致，且无法修改。

---

五、grid栅格布局解决方案

优点：最新css规范，简洁

---