[分享]css两边浮动中间自适应

CSS中的浮动是一个非常常用的布局方式，通过浮动可以将一个元素移动到页面的左侧或右侧，从而实现多列布局。在这种情况下，中间部分的宽度是固定的，而左右两侧的宽度是可变的。那么，在这种情况下，如何才能让中...

CSS中的浮动是一个非常常用的布局方式，通过浮动可以将一个元素移动到页面的左侧或右侧，从而实现多列布局。在这种情况下，中间部分的宽度是固定的，而左右两侧的宽度是可变的。那么，在这种情况下，如何才能让中间部分自适应宽度呢？下面我们将讲解通过CSS实现这一效果的方法。

.container{
  width: 100%;
  overflow: hidden;
}
.left{
  float: left;
  width: 200px;
  background-color: #ccc;
}
.right{
  float: right;
  width: 200px;
  background-color: #ccc;
}
.middle{
  margin: 0 200px;
  background-color: #eee;
} 

上面的代码中，我们首先创建了一个容器，通过设置overflow:hidden属性可以清除浮动，使得容器能够包含内部的内容。然后，我们创建了左侧、右侧和中间三个元素，左侧和右侧的宽度都为200px，而中间部分通过设置margin来让其自适应宽度。

这样设置之后，中间部分就可以根据页面大小来自适应宽度了。如果你希望中间部分的高度能够跟随左右两侧的高度而自适应，可以在容器中添加一个clearfix清除浮动。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
} 

通过以上的步骤，我们就可以轻松实现两边浮动中间自适应的效果了。