【前端笔记7】CSS进阶3 浮动 (结构伪类选择器、伪类选择器)

本文是基于课程 前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程 P112-128节的笔记总结，便于前端零基础小白（我）学习查找。

---

结构伪类选择器nth-child(n){}

作用：根据元素在HTML结构中的关系，查找元素
优势：减少对HTML中类的使用，简洁化代码
场景：查找父级选择器中的子元素

选择器

选择器	说明
(E):first-child{}	匹配父元素第一个子元素，且是E元素
(E):last-child{}	匹配父元素最后一个子元素，且是E元素
(E):nth-child(n){}(常用)	匹配父元素第n个子元素，且是E元素
(E):nth-last-child(n)	匹配父元素倒数第n个子元素，且是E元素

(n)可填数字、公式

功能	公式
偶数	2n,even
奇数	2n+1,2n-1,odd
找到前五个	-n+5
找到第五个往后	n+5

伪元素选择器

伪元素：假标签，一般页面中的非主体内容可用伪元素

区别 →
元素：HTML设置的标签
伪元素：由CSS模拟出的标签效果

种类：

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意：

1. 必须设置content属性才能生效
2. 伪元素默认是行内元素

标准流(了解)

标准流：文档流，是浏览器在渲染显示网页内容时默认采用的一套编版规则，规定了应该以何种方式排列元素

常见标准流排班规则：

1. 块级元素：上→下、垂直布局
2. 行内(块)元素：左→→、水平布局

浮动属性：float : (值);

浮动诞生的背景→
块级标签转行内(块)标签的间距现象：
浏览器解析 行内块或行内标签__时，若两标签换行书写，两标签在网页上的盒子会产生__一个空格的 距离。

浮动的作用：图文环绕、网页布局
属性名：float : (值);

值：left、right

特点：

1. 浮动元素脱离标准流(脱标)，不占页面空间(浮起来了)
2. 浮动元素比标准流高半个级别，可覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素有特殊的显示效果：

• 一行可显示多个
• 可以设置宽高

注意：浮动的元素不能通过margin: 0 auto; 居中

CSS书写顺序（提高网页解析效率）

1. 浮动 / display
2. 盒子模型：margin border padding 宽度高度背景色
3. 文字样式

清除浮动

错误问题出现时的辅助功能

含义：清除浮动带来的影响

例如：若子元素浮动，子元素就不能撑开标准流的块级父元素
原因：子元素浮动后脱标(不占位置)

目的：需要父元素有高度，从而不影响其他网页元素布局

问题举例：父子级标签中，子级浮动，父级没有高度，其他标签占用元父级标签的位置
解决方法：

1. 父级添加高度
2. 添加额外标签

解决方法之一：额外标签
操作：

1. 在父元素内容的最后添加一个块级元素
2. 在添加的块级元素设置 clear:both(通常取类名"clearfix")
   特点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

clear:both作用；清除左右两侧浮动影响

清除浮动方法之二：单伪元素清除法(常用)
操作：用伪元素替代了额外标签

.clearfix::after{		// 父级标签需提前增加类名clearfix
	content:'';		// 伪标签需有内容
	display: block;	//伪元素添加的标签是行内的，实际需块
	clear: both;
	// 以下为补充代码，以增强兼容性
	height:0;
	visiblity:hidden;
}

清除浮动方法之三：双伪元素清除法
操作：用伪元素替代了额外标签

.clearfix::before,
.clearfix::after{		// 父级标签需提前增加类名clearfix
	content:'';		// 伪标签需有内容
	display: table;	// 转为表格，解决外边距塌陷问题
}
.clearfix::after{
	clear:both;
}

清除浮动方法之四：父元素设置overflow:hidden
操作：给父元素增加 overflow:hidden;

---

---

若对本文有任何建议或意见欢迎在评论区提出~十分感谢！
Ending