伪元素

伪元素：一般页面中的非主体内容可以使用伪元素 区别：

1. 元素：HTML 设置的标签

2. 伪元素：由 CSS 模拟出的标签效果

种类:

1）、first-line 伪元素选择器

first-line 伪元素选择器用于向某个元素中的第一行文字使用样式。

2）、first-letter 伪元素选择器

first-letter 伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或者是日文等汉字）使用样式。

注意点：

1. 必须设置content属性才能生效

2. 伪元素默认是行内元素

标准流

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

Ø 常见标准流排版规则：

1. 块级元素：从上往下，垂直布局，独占一行

2. 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行

浮动

属性名: float 属性值:

浮动的特点

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置

相当于从地面飘到了空中

2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素

3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4. 浮动元素会受到上面元素边界的影响

5. 浮动元素有特殊的显示效果 一行可以显示多个

可以设置宽高 注意点：

浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中

清除浮动

清除浮动介绍

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

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

Ø 原因：

子元素浮动后脱标 → 不占位置

Ø 目的：

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

清除浮动的方法

清除浮动的方法 — ① 直接设置父元素高度

特点：

优点：简单粗暴，方便

缺点：有些布局中不能固定父元素高度。

清除浮动的方法 — ② 额外标签法

操作：

1. 在父元素内容的最后添加一个块级元素

2. 给添加的块级元素设置 clear:both

Ø 特点：

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

清除浮动的方法 — ③ 单伪元素清除法

操作：用伪元素替代了额外标签

特点：

优点：项目中使用，直接给标签加类即可清除浮动

清除浮动的方法 — ④ 双伪元素清除法

操作:

特点：

优点：项目中使用，直接给标签加类即可清除浮动

清除浮动的方法 — ⑤ 给父元素设置overflow : hidden

操作：

1. 直接给父元素设置 overflow : hidden

Ø 特点：

优点：方便

BFC介绍

块格式化上下文（Block Formatting Context）：BFC

是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

Ø 创建BFC方法：

1. html标签是BFC盒子

2. 浮动元素是BFC盒子

3. 行内块元素是BFC盒子

4. overflow属性取值不为visible。如：auto、hidden…

5. ……

Ø BFC盒子常见特点：

1. BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动

2. BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷

3. ……