高度自适应，内容是浮动元素

可以有四种方法：

1.添加overflow:hidden;

2.添加伪元素

//方法2
<style>
　　.wrap{
　　　　border:1px solid blue;
　　　　width:600px;
　　　　margin:0 auto;
　　　　padding:20px 0;
　　}
　　.main{
　　　　float:left;
　　　　background:pink;
　　　　width:350px;
　　　　height:100px;
　　}
　　.side{
　　　　float:left;
　　　　background:rosybrown;
　　　　width:200px;
　　　　height:100px;
　　}
　　.wrap:after{
　　　　content:'';
　　　　display:block;
　　　　clear:both;
　　}
　　.wrap{
　　　　zoom:1;//触发IE的hasLayout属性，该属性IE独有
　　}
</style>
<div class="wrap">
　　<div class="main"></div>
　　<div class="side"></div>
</div>

 3.父元素设置为浮动

4.添加空元素

　　直接在浮动的子元素下添加一个非浮动的空元素

<div style="border:5px solid #000;">
    <div style="float:left;width:45%;height:100px;background:#ccc"></div>
    <div style="float:right;width:45%;height:100px;background:#000"></div>
    <div style="clear:both"></div>
</div>

 

转载于:https://www.cnblogs.com/rachelch/p/7497888.html