父级盒子无高度，子盒子浮动，高度自适应

利用浮动实现三列布局，中间宽度自适应

 #box{ border: 1px solid red;
    } #left{ width: 120px; height: 300px; float:left; background-color: grey;
    } #main{ height: 500px; margin: 0 220px 0 140px; background-color:skyblue;
    } #right{ width: 200px; height: 600px; float: right; background-color: grey;
    } <div id="box"> <div id="left"></div> <div id="right"></div> <div id="main"></div> </div>

 

方法一：父级盒子添加一堵墙，用clear：both清除浮动

<div id="box">
    <div id="left"></div>
    <div id="right"></div>
    <div id="main"></div>
    <div class="clear"></div>
</div>

方法二：父级盒子添加overflow：hidden