行内块元素、浮动性质补充，关于宽度自适应问题

1. 关于子元素继承父元素的宽度问题

行内块元素无法继承父元素的宽度，它可以自己设置宽高，但是无法从父元素那里继承。

2.浮动

float:left/float:right 会脱离文档流，相对于父级元素进行的浮动，但不会继承于父元素，浮动元素浮动之后的位置，由浮动之前元素在标准流中的位置来确定。和position:absolute不同，position:absolute会无视所有文档流，只根据已定位的祖先元素定位。

3.宽度自适应

1）两列左侧固定，右侧自适应

.all{
    width: 100%;
    height: 200px;
    position: relative;
} 
 .eight_left{
<!--display: inline-block;-->
width: 200px;
height: 100%;
background-color: yellow;
<!--float:left;-->
position: absolute  ;
} 
.eight_right{
height: 100%;
background-color: blue; 
margin-left: 200px;
}

如果想左侧固定，右侧自适应，那么右侧就不用设置宽度，右侧的宽度根据父元素自动计算。那么，右侧必须继承父元素的宽度。所以我们只能使用可以继承宽度的块元素，这里我们选择了div标签。 左侧固定，那么左侧可以选择块元素或者行内块元素。因为右侧自适应，需要继承父元素的宽度，那么右侧不能使用会脱离文档流的float或position:absolute来让左侧和右侧在同一行。所以，我们只能选择float或position:absolute让左侧脱离文档流。两种方式都可以奏效。 2）三列左右固定，中间自适应

.container{
    width: 100%;
    height: 100px;
    position: relative;
}
.left{
    width: 100px ;
    height: 100px;
    background-color: violet;
    position: absolute ;
    left: 0;
}
.right{
    width: 100px;
    height: 100px;
    background-color: turquoise;
    position: absolute ;
    right: 0;
    top: 0;
}
.center{
    height: 100px;  
    background-color: teal;
    margin-left: 100px;
    margin-right: 100px;
}