float: left | right
-
float元素會根據父元素padding的內邊界進行定位。
1.遇到float元素會停止；
2.遇到非塊級元素時，會浮動到非塊級的最左邊或最右邊;
3.float元素會把內聯元素、塊元素都變為內聯塊級元素，原來的塊級元素將不再獨占一行。
4.float元素無法針對塊級元素浮動。
- 如果float元素前面有block元素，則會另起一行進行浮動。
- 如果后面有block元素，則會遮蓋block元素。
- 如果后面是定位元素，定位元素會遮蓋float元素。
- 除了display:flex以外的所有元素設置了float后，display屬性將會失效，float元素可以設置寬高。
- float除了對定位元素relative生效以外，其他定位元素均不生效。
-
使用偽類、偽元素可以清除浮動。如下：
必須設置為display:block。inline和inline-block屬于行內，所以無法清除浮動。
div::after,
ul::after{
content: "";
display: block;
clear: both;
}
:before ::before
- 默認為inline元素 無法設置寬高
- 區別：前者偽類，后者偽元素。由于歷史原因，兩者的效果都等同于偽元素。建議使用::。
- after同上。
- attr(name) 獲取屬性值 如下：
span::before{
content: attr(ji);
}
<span ji="nihao">bbb</span>
// nihaobbb
extend
- 使用清除浮動的根本原因是，浮動元素會造成父元素的高度塌陷，內部的元素由于脫離文檔流，導致后面的元素移到了上方.
- 利用clear屬性，可以清除掉浮動，可以在后面元素使用clear: left;清除掉浮動，這樣后面的元素可以正常排列。或者在父元素上添加尾元素，通過設置content、display、clear清除浮動，同時可以撐起父級元素的高度。
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
