<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap {
border: 1px solid red;
/*overflow: hidden;
*zoom: 1;*/
/*overflow: auto;*/
/*float: right;*/
/*display: table;*/
}
.clearfix:after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix{display: inline-block;}
.main {
200px;
height: 200px;
background: red;
float: left;
margin: 5px;
}
.slide {
200px;
height: 200px;
background: blue;
float: left;
margin: 5px;
}
/*第一种方法:在浮动的元素的同级添加一个空元素,使它清除浮动,这时新加的元素就会在文档流
中,父元素就会被撑开,包含空元素.由于空元素与其他两个div同级,自然其他两个div也会被
包含进来,导致父元素被撑开. */
/*.null{clear: both;}*/
/*第二种是在同级添加br clear="all" 也会清除浮动 达到同样的效果 */
/*第三种是在父元素添加overflow: hidden,内容增多时候容易造成不会
自动换行导致内容被隐藏掉，无法显示需要溢出的元素；产生hasLayout */
/*第四种overflow: auto,产生hasLayout*/
/*第五种:父元素也设置浮动 会使得与父元素相邻的元素也会受到影响 布局会发生改变*/
/*第六种父元素设置display:table,盒模型属性已经改变，由此造成的一系列问题*/
/*第七种父类添加伪元素after*/
</style>
</head>
<body>
<div class="wrap clearfix" >
<div class="main">
main
</div>
<div class="slide">
slide
</div>
<!--<div class="null">
</div>-->
<!--<br clear="all" />-->
</div>
<div class="footer">
footer
</div>
</body>
</html>