实现方法：

一、float浮动

<section class='layout float'>         <style>             .layout.float .left-right-center{                 height: 100px;             }             .layout.float .left{                 float: left;                 width: 300px;                 background-color: red;             }             .layout.float .right{                 float: right;                 width: 300px;                 background-color: blue;             }             .layout.float .center{                 background-color: yellow;             }         </style>         <article class="left-right-center">             <div class="left"></div>             <div class="right"></div>             <div class="center">我是中间的自适应元素--浮动</div>         </article>     </section>

原理：左右两个div由于浮动脱离了文档流，center就会上移，造成三栏布局的效果（前提是高度相同）

优点：兼容性高

缺点：需要清除浮动来防止影响其他元素

如果高度不固定，中间的内容会被撑开，左右两边不会一起撑开

（