怎么实现三列布局（左侧和右侧宽度固定，中间自适应）

绝对定位 + 中间板块不给宽度

    
  
     
      左侧
     
  
     
      中间
     
  
     
      右侧
     
    
复制代码

.left {    position: fixed;    left: 0;    top: 0;}.right {    position: fixed;    right: 0;    top: 0;}.center {    width：auto;}复制代码

两侧浮动 + 中间自动撑开 中间宽度用 calc 计算，设置两侧对应宽的 margin

    
  
     
      左侧
     
  
     
      右侧
     
  
     
      中间
     
    
复制代码

.left {  float: left;  background: red;  width: 100px;}.right {  float:right;  background: blue;  width: 100px;}.center {  background: yellow;  width: calc(100% - 200px);  margin: 0 100px;}复制代码

flex

左右设置flex-basis, 中间设置flex-grow

    
  
     
      左侧
     
  
     
      中间
     
  
     
      右侧
     
    
复制代码

.box {  height: 100%;  display:flex;}.center {  flex-grow: 1;  background: red;}.left, .right {  flex-basis: 100px;  background: yellow;}复制代码

flex 具体是怎么实现三列布局的

左侧和右侧的宽度通过flex-basis设置宽度，中间自适应通过flex-grow

设为flex属性后，子元素的哪些属性会失效

float、clear 和 vertical-align