對于
::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;
}
看東西不認真會導緻反複和浪費時間。