::before ::after 以及 clear:left, right, both

对于::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属性，那么

1. 清除该元素前面的元素带来的浮动影响，
2. 放在浮动元素的后面

这里， 网络上的说法：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;
    }

看东西不认真会导致反复和浪费时间。