清除浮动效果图：
清除前：因为元素一二三都浮动(设置了float: left;)，所以造成高度塌陷，所以father的兄弟元素有一半部分在上面，嵌入了上层空间
（因为
.brother设置了两倍的宽高，所以有一般father的兄弟元素嵌入了上层
而浮动的不占据空间，只浮动在表层，只有边框带有的高度和div加边框构成本身的宽度
清除浮动后：因为元素一二三都清除了浮动(设置了float: left;)，占据空间，所以father的兄弟元素全都放在了下面，无法再嵌入上层空间中
<!-- 由于father的三个子元素全部都浮动起来了，不处于普通文档流中了，所以内部没有元素来撑起父元素的内容 -->
<!-- 面试题：father是块级元素 宽100% 高内容决定 浮动——>0(浮动带来的高度塌陷) -->
<!--面试题 清除浮动对父元素以及兄弟元素带来的影响 clean -->
<!-- 方法1.overflow:hidden 建议使用
2.给被影响的元素后面添加一个空元素，给其设置clean:both 不建议使用给文档添加无意义的元素结构
3.伪对象选择器结合content来使用，给选中元素添加内容 -->
代码实现 ：
<!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>
</head>
<body>
<!-- 由于father的三个子元素全部都浮动起来了，不处于普通文档流中了，所以内部没有元素来撑起父元素的内容 -->
<!-- 面试题：father是块级元素 宽100% 高内容决定 浮动——>0(浮动带来的高度塌陷) -->
<!--面试题 清除浮动对父元素以及兄弟元素带来的影响 clean -->
<!-- 方法1.overflow:hidden 建议使用
2.给被影响的元素后面添加一个空元素，给其设置clean:both 不建议使用给文档添加无意义的元素结构
3.伪对象选择器结合content来使用，给选中元素添加内容 -->
<div class="father">
<div class="first">元素一</div>
<div class="second">元素二</div>
<div class="third">元素三</div>
<div class="clean"></div>
</div>
<div class="brother">father的兄弟元素</div>
</body>
</html>
<style>
.first{
width: 100px;
height: 100px;
background-color: red;
float: left;
/* 设置浮动，脱离文档流，元素处于一个漂浮状态，已经跟普通文档流不在同一层面上了 */
/* 漂浮层在上面 */
/* opacity: 0.5; */
}
.second{
width: 100px;
height: 100px;
background-color: rgb(115, 255, 0);
float: left;
/* opacity: 0.2; */
}
.third{
width: 100px;
height: 100px;
background-color: rgb(183, 0, 255);
float: left;
}
.father{
border: 2px solid black;
/* 第一种方法：清除浮动 */
/* overflow: hidden; */
}
.father::after{
/* 第三种方法 */
/* 3.伪对象选择器结合content来使用，给选中元素添加内容 */
content: '';
display: block;
clear: both;
}
.brother{
width: 200px;
height: 200px;
background-color:green;
}
/* 第二种方法 */
/* .clean{
clear: both;
} */
</style>
1692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
