清除浮动:清除浮动元素带来的影响(浮动元素不占位置,没办法撑开父元素的高度)
方法一:设置高度
给浮动元素的父元素设置高度 一般开发中高度会不确定,因此此方法不可取
方法二:额外标签法
在浮动元素的最后面添加一个空的块级元素,给这个块元素增加清除浮动的属性clear: both;
.clear {
clear: both;
}
<div class="clear"></div>
方法三:单伪元素
给浮动元素的父元素增加类名 clearfix
/* 单伪元素:找到浮动元素的父亲,给父亲增加类名 clearfix
前三个属性必写 */
.clearfix::after {
/* 伪元素必写属性 */
content: "";
/* 清除浮动 */
clear: both;
/* 伪元素after是一个行内元素,清除浮动要转为块元素 */
display: block;
/* 清除可能因为继承产生的高度 */
height: 0;
/* 清除可能因为继承产生的行高 */
line-height: 0;
/* 隐藏元素 */
visibility: hidden;
}
<div class="father clearfix">
<!-- 浮动元素位置 -->
</div>
案例展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>清除浮动-单伪元素</title>
<style>
.father {
width: 1226px;
margin: 0 auto;
border: 5px saddlebrown solid;
}
.father .box {
/* 加上浮动会脱离文档流,覆盖一部分shushu */
float: left;
width: 200px;
height: 50px;
background-color: pink;
}
.shushu {
height: 100px;
background-color: orange;
}
/* 额外标签法的进阶版*/
/* 单伪元素:找到浮动元素的父亲,给父亲增加类名 clearfix */
.clearfix::after {
/* 伪元素必写属性 */
content: "";
/* 清除浮动 */
clear: both;
/* 伪元素after是一个行内元素,清除浮动要转为块元素 */
display: block;
/* 清除可能因为继承产生的高度 */
height: 0;
/* 清除可能因为继承产生的行高 */
line-height: 0;
/* 隐藏元素 */
visibility: hidden;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="box">box1</div>
<div class="box">box2</div>
</div>
<div class="shushu">叔叔</div>
</body>
</html>
注释掉浮动
div.box这个盒子仍在标准流中,father的儿子box设置了高度,可以撑开盒子,此时效果:
为儿子添加了浮动属性之后,father的儿子.box会脱标,浮在标准流上方,脱标的.box不能撑开父盒子,通过浏览器检查会发现.father的宽度是默认浏览器的宽度,但高度只有10px(上边框5px+下边框5px=10px)
因为.box浮动不占位置,所以下面的标准流中的盒子(.shushu)会正常往上走,因此可以判断浮动对我们的页面产生了影响,我们需要清除浮动
方法四:双伪元素
给浮动元素的父元素增加类名 clearfix
/* 双伪元素 */
/* .clearfix::before 可以解决margin塌陷问题*/
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
<div class="father clearfix">
<div class="box">box1</div>
<div class="box">box2</div>
</div>
<div class="shushu">叔叔</div>
方法五、overflow:hidden
给浮动元素的父元素设置属性overflow:hidden;