对于
::before
,
::after
, 发现以前理解错了，在这里记录一下。
起因
早上看
float
布局时， 突然想起以前学的
clear:both
清除浮动， 其中有个利用
::after
伪元素的方法， 我动手试了一下,
一开始 ，我写成这样：
<div class="parent">
<div class="left"></div>
</div>
.parent{
border: 5px solid #000;
}
.left {
float: left;
width: 200px;
height: 100px;
background-color: yellow;
opacity: 0.7;
}
效果：
父元素高度没撑开， 现在用上
clear: both
试试，然后，我写成了这样：
<div class="parent">
<div class="left"></div>
</div>
.parent{
border: 5px solid #000;
}
.left {
float: left;
width: 200px;
height: 100px;
background-color: yellow;
opacity: 0.7;
}
.left::after{
content: '';
clear: both;
}
效果：
还是没撑开啊 ？ nmd, wsm ?
::after
不是给
left
加了一个兄弟吗，
clear：both
不是清除前面的浮动效果吗？
查了一下发现， 我理解错了 !
::after
给元素增加一个
子元素
（而不是兄弟元素），放在最后。。。。
改成这样就好了
<div class="parent">
<div class="left"></div>
</div>
.parent {
border: 5px solid #000;
}
.left {
float: left;
width: 200px;
height: 100px;
background-color: yellow;
opacity: 0.7;
}
.parent::after{
content: '';
display: block;
clear: both;
}
OK, 撑开了，看东西还是要细心。。
::before 和 ::after
网络上搜的很多文章的解释是: 在元素前或后产生一个伪元素；
这种解释不严谨， 让我误以为，
::before
和
::after
生成的元素是兄弟元素 ;
现在才发现是不对的（捂脸），来看一下MDN上的解释
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
生成的是子元素。。。
::before
放在第一位，
::after
放在最后。
clear: both
为什么
clear: both
能撑开父级 ？
先看一下
clear
在
MDN
的解释：
clear 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。
The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it. The clear property applies to floating and non-floating elements.
也就是说，如果在一个元素加上clear属性，那么
- 清除该元素前面的元素带来的浮动影响，
- 放在浮动元素的后面
这里， 网络上的说法：
clear：both 会消除该元素两侧的浮动
， 这是错误的，
clear 只能消除在它前面的元素的浮动 ！
否则， 为甚么网上搜的所有的方法都用::after, 而不是::before呢， 因为::before生成第一个子元素， 浮动元素都在它之后， 根本无法消除。
clear:left
，
clear:right
,
clear: both
三者区别在哪？ 直接看效果。
1. clear: left
清除前面的
float：left
元素的影响，可以看到，父容器高度以
左浮动2
为准了， 此时右浮动还是超出了容器 。
<div class="parent">
<div class="left">左浮动1</div>
<div class="left" style="height: 80px">左浮动2</div>
<div class="right">右浮动</div>
<div class="clear"></div>
</div>
.parent {
border: 2px solid #656565;
width: 500px;
margin: 0 auto;
}
.left {
float: left;
height: 50px;
width: 100px;
background: #2ecc71;
opacity: 0.8;
}
.right {
float: right;
height: 120px;
width: 100px;
background: #e74c3c;
opacity: 0.8;
}
.clear {
clear: left;
}
2. clear: right
同理, 清除该元素前面, 右浮动元素的影响, 此时父容器高度被右浮动撑开了(其实应该说，clear:both元素被放在右浮动元素的后面了, 所以撑开了)
<div class="parent">
<div class="left">左浮动1</div>
<div class="left" style="height: 120px">左浮动2</div>
<div class="right">右浮动</div>
<div class="clear"></div>
</div>
.parent {
border: 2px solid #656565;
width: 500px;
margin: 0 auto;
}
.left {
float: left;
height: 50px;
width: 100px;
background: #2ecc71;
opacity: 0.8;
}
.right {
float: right;
height: 80px;
width: 100px;
background: #e74c3c;
opacity: 0.8;
}
.clear {
clear: right;
}
3. clear: both
同理, 清除前面的所有浮动元素影响
<div class="parent">
<div class="left">左浮动1</div>
<div class="left" style="height: 120px">左浮动2</div>
<div class="right">右浮动</div>
<div class="clear"></div>
</div>
.parent {
border: 2px solid #656565;
width: 500px;
margin: 0 auto;
}
.left {
float: left;
height: 50px;
width: 100px;
background: #2ecc71;
opacity: 0.8;
}
.right {
float: right;
height: 80px;
width: 100px;
background: #e74c3c;
opacity: 0.8;
}
.clear {
clear: both;
}
看东西不认真会导致反复和浪费时间。