放三个div,正常情况下没有浮动是这样的:div从上至下排列
<style>
.div1{
width: 100px;
height: 200px;
background-color: red;
}
.div2{
width: 200px;
height:100px ;
background-color: pink;
}
.div3{
width: 400px;
height: 80px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
现在我让div1和div2浮动,就成了这样:
.div1{
width: 100px;
height: 200px;
background-color: red;
float: left;
}
.div2{
width: 200px;
height:100px ;
background-color: pink;
float: left;
}
.div3{
width: 400px;
height: 80px;
background-color: yellowgreen;
}
div3没有设置浮动,本该在下面,为什么也上去了并且在div1和div2的下面呢?因为设置了浮动的元素就脱离了文档流,在页面中不占位置,所以div3就自然而然跑到了上面。
说到脱离文档流要说一下什么是文档流,文档流是 元素按照其在HTML中的位置顺序从上至下(块级元素),从左至右(行内元素) 排布的位置
第一种方法
那如果我们想让div3排在div1和div2的下面呢,应该怎么做?这时候可以用清除浮动的第一种方法:额外标签法:在需要清除浮动的元素前面放一个空的div,并给这个空div设置属性 clear:both,就变成了这样,达到了我们想要的效果
.clearfix{
clear: both;
}
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="clearfix"></div>
<div class="div3">div3</div>
- 优点:通俗易懂,方便
- 缺点:增加了无意义的结构元素,语义化差
第二种方法
我们现在用一个div将这几个div包裹起来,并给这个大div设置背景颜色灰色:
<style>
.box{
background-color: gray;
}
.div1{
width: 100px;
height: 200px;
background-color: red;
float: left;
}
.div2{
width: 200px;
height:100px ;
background-color: pink;
float: left;
}
.div3{
width: 400px;
height: 80px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
因为div1和div2脱离了文档流,造成父元素高度塌陷,大div只包裹住了div3,怎么解决呢?现在我们用到了清除浮动的第二种方法:给父元素设置 overflow 属性 为 hidden 或者 auto
.box{
background-color: gray;
overflow: hidden;
}
<div class="box">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
- 优点:代码简洁
第三种方法
我们还可以用清除浮动的第三种方法利用伪元素清除有浮动的标签->在有浮动的标签前面添加一个块级元素
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
.clearfix:after{
content:"";
display: table;
height: 0;
visibility: both;
clear: both;
}
<div class="box clearfix">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
我们可以定义一个类 clearfix ,给这个类里面添加css属性,设置清除浮动的操作,哪里需要清除浮动就给哪里设置这个类
- 优点:符合闭合浮动思想,结构语义化正确
- 缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout.
总结
经过以上的尝试,我们可以总结出来清除浮动的三种方法:
- 额外标签法:在需要清除浮动的元素前面加空 div 并设置 clear 为 both
- 浮动引起的父元素高度塌陷时,设置父元素 overflow 属性为hidden或auto
- after 伪元素清除法浮动