css常见的三栏式布局实现方法

三栏式布局

三栏式布局是最常见的布局方式，应用场景：左、右两侧定宽，中间内容自适应

如何实现三栏式布局呢

1、利用浮动
通过左侧向左浮动，右侧向右浮动，最后渲染中间部分来实现的；因为中间部分是最后渲染的因此在html中中间部分写在div的最后面
缺点：当中间内容高于两侧时，两侧的高度不会随中间的内容变高而变高

<!-- html代码 -->
<div class="box">
        <div class="left">我是左边的盒子</div>
        <div class="right">我是右边的盒子</div>
        <div class="center">我是中间的盒子</div>
</div>

/*这是css代码*/
.box{
   
	margin:0;
	padding:0;
}
.left{
   
	float:left;
	width:300px;
	height:400px;
	background-color:red;
}
.right{
   
	float:right;
	width:200px;
	height:400px;
	background-color:blue;
}
.center{
   
	background-color:yellow;
	height:400px;
	overflow:hidden;
}

2、利用绝对定位
采用了absolute，导致父元素脱离文档流，所有的子元素也脱离文档流

  &