为什么需要清除浮动
如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0。由于父盒子的高度为0,下面的元素会自动补位,所以这个时候要进行浮动的清除。
方式1:额外标签法
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置clear:both;
<style>
.head {
width: 600px;
margin: 0 auto;
background-color: #FFCCCC;
}
.left {
float: left;
height: 300px;
width: 200px;
background-color: #FFFF99;
}
.right {
float: right;
height: 300px;
width: 300px;
background-color: #CCCCFF;
}
.box {
height: 200px;
width: 800px;
margin: 0 auto;
background-color: #CCCCCC;
}
.clearfix{
clear: both;
}
</style>
<body>
<div class="head">
<div class="left"></div>
<div class="right"></div>
<!--清除新标签-->
<div class="clearfix"></div>
</div>
<div class="box"></div>
</body>
</html>
方式2:使用overflow属性来清除浮动
在父元素中添加一个属性:overflow:hidden
一般情况下也不会使用这种方式,因为overflow:hidden有一个特点,离开了这个元素所在的区域以后会被隐藏(overflow:hidden会将超出的部分隐藏起来)。
.head {
width: 600px;
margin: 0 auto;
background-color: #FFCCCC;
overflow: hidden;
}
方式3:单伪元素清除法
- 定义伪元素,定义属性clear: both
/*使用伪元素代替了html中的额外标签*/
.clearfix::after {
content: "";
display: block;
clear: both;
}
- 直接给父元素class中添加该伪元素
<div class="head clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="box"></div>
方式4:双伪元素清除法
- 定义双伪元素
/*使用伪元素代替了html中的额外标签,clearfix::before解决外边距塌陷问题*/
.clearfix::before, .clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
- 直接给父元素class中添加该伪元素
<div class="head clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="box"></div>