<CSS>问题：伪元素选择器清除浮动使得父元素有高度
2018-04-25 本文已影响11人
玉圣
刚刚学习CSS中清除浮动的这一块知识点，利用伪元素选择器可以清除浮动，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS清除浮动四</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
background-color: greenyellow;
}
.box2 {
background-color: indianred;
}
.box1 p {
width: 100px;
background-color: pink;
float: left;
}
.box2 p {
width: 100px;
background-color: deepskyblue;
float: left;
}
.box1::after{
content: '';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="box1">
<p>我是文字啊1</p>
<p>我是文字啊1</p>
<p>我是文字啊1</p>
<p>我是文字啊1</p>
<p>我是文字啊1</p>
</div>
<div class="box2">
<p>我是文字啊2</p>
<p>我是文字啊2</p>
<p>我是文字啊2</p>
<p>我是文字啊2</p>
<p>我是文字啊2</p>
</div>
</body>
</html>
示例图片
在显示的结果中，可以发现，父元素div(.box1)的高度是21px（通过谷歌的开发者工具可得，图中右侧红色箭头所指），有淡绿色的背景，这就让我有点不解。
在之前学习浮动的时候，浮动元素会脱离标准流，使得父元素的高度为0，加上了伪元素选择器添加的内容，这个伪元素选择器添加的内容似乎应该在父元素的左上角，浮动元素会盖住它才对。后来经过自己的思考和分析，觉得可能是如下原因导致的：
1、浮动元素的字围现象：
伪元素选择器添加的内容（块级），清除浮动之后，会在浮动元素的下方，而不是被浮动元素盖住的原因，可能是字围现象导致的，字围现象也就是没有浮动的元素中的内容会自动给浮动的元素让出位置，即浮动元素会在父元素中占一定的空间，而不会盖住没有浮动的元素的内容。
其实可以通过删除伪元素选择器中添加的content属性来观察一下，去除content属性之后，清除浮动的效果就消失了。
是否真的是此种原因导致的，只是我的猜测而已，如果有朋友知道其中的原理，还请多多指正，非常感谢。
