浮动后缩放或调整浏览器大小导致塌陷 和 通过绝对定位来实现宽度高度自适应

1.浮动后缩放或调整浏览器大小导致塌陷

正常情况

缩放或调整了浏览器大小导致了塌陷

解决方法

• 父元素设置指定宽度(width或者min-width)
  

2.通过绝对定位来实现宽度高度自适应

问题

• a，b 左浮动，c右浮动.怎么能让b在不同的缩放和浏览器大小下自动填满中间呢？
  

解决方法

• 利用绝对定位

.left{
    float: left;
    width: 300px;
}
.middle{
    position: absolute;
    left: 300px;
    right: 300px;
}
.right{
    float: right;
    width: 300px;
}

无论怎么调整b宽度永远是能填满中间的


同理高度也可以这么做

.left{
    position: absolute;
    width: 300px;
    left: 0;
    top: 0;
    bottom: 0;
}
.middle{
    position: absolute;
    left: 300px;
    right: 300px;
    height: 100px;
}
.right{
    float: right;
    width: 300px;
    height: 100px;
}