diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241016-\346\240\267\345\274\217\347\273\247\346\211\277\345\222\214\345\217\240\345\212\240\346\200\247\345\272\217\345\210\227\351\242\230.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241016-\346\240\267\345\274\217\347\273\247\346\211\277\345\222\214\345\217\240\345\212\240\346\200\247\345\272\217\345\210\227\351\242\230.md"
new file mode 100644
index 0000000000000000000000000000000000000000..76dbfa9ea77c446e0ed0a2b28d4709e0afb02aa7
--- /dev/null
+++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241016-\346\240\267\345\274\217\347\273\247\346\211\277\345\222\214\345\217\240\345\212\240\346\200\247\345\272\217\345\210\227\351\242\230.md"
@@ -0,0 +1,56 @@
+1. 蓝色
+2. 红色
+3. 绿色
+4. 绿色
+5. 蓝色
+```html
+
+
+
+ ```
+6. 蓝色
+7. 黄色
+```html
+
+
+
+```
+ps：`错题覆盖上代码`
\ No newline at end of file
diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241016-\347\233\222\345\255\220\346\250\241\345\236\213.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241016-\347\233\222\345\255\220\346\250\241\345\236\213.md"
new file mode 100644
index 0000000000000000000000000000000000000000..2c22e5a1734e164aa588ca8dafdb6f2660fb2003
--- /dev/null
+++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241016-\347\233\222\345\255\220\346\250\241\345\236\213.md"
@@ -0,0 +1,93 @@
+1. 说出下面盒子的真实占用的宽高，并画出盒子模型图
+
+
+
+
+
+ Document
+
+
+
+
+
+
+真实宽：262px 真实高：232px -->
+
+2. 说出下面盒子的真实占用的宽高，并画出盒子模型图
+
+
+
+
+
+ Document
+
+
+
+
+
+
+真实宽：302px,真实高：272px -->
+
+3.有如下盒子模型图，请写出代码，尝试用最简单的方式
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+4. 有如下盒子模型图，请写出代码，尝试用最简单的方式
+
+
+
+
+
+ Document
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..db3d42ce51374c02954cded3089b34ed6c29fb84
--- /dev/null
+++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.md"
@@ -0,0 +1,214 @@
+1. 使用浮动，实现如下效果，具体数值（宽度、高度、间距等可自行使用snipaste测量，也可参考如上标识的数值，颜色随意）
+```html
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+```
+
+2.使用浮动，实现如下效果
+```html
+
+
+
+
+
+ Document
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/Snipaste_2024-10-17_11-30-28.png" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/Snipaste_2024-10-17_11-30-28.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6dbef5f47d56d3d2916566c92388fb5935327be0
Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/Snipaste_2024-10-17_11-30-28.png" differ
diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20240930-css\350\203\214\346\231\257\345\261\236\346\200\247.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20240930-css\350\203\214\346\231\257\345\261\236\346\200\247.md"
index efbce78e1d35337c364ddf08c4544198923f361b..9e1fdc880cf05ddff54301eb98e2c6dadad9c8c2 100644
--- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20240930-css\350\203\214\346\231\257\345\261\236\346\200\247.md"
+++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20240930-css\350\203\214\346\231\257\345\261\236\346\200\247.md"
@@ -53,4 +53,116 @@
background-size: cover;
/* contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。 */
- background-size: contain;
\ No newline at end of file
+ background-size: contain;
+
+## 背景原点：`background-origin` 属性
+
+`background-origin` 属性：控制背景从什么地方开始显示。
+
+格式举例：
+
+```css
+
+ /* 从 padding-box 内边距开始显示背景图 */
+ background-origin: padding-box; //默认值
+
+ /* 从 border-box 边框开始显示背景图 */
+ background-origin: border-box;
+
+ /* 从 content-box 内容区域开始显示背景图 */
+ background-origin: content-box;
+
+```
+如果属性值设置成了`border-box`，那边框部分也会显示图片哦。
+
+## `background-clip`属性：设置元素的背景（背景图片或颜色）是否延伸到边框下面
+
+格式举例：
+
+`background-clip: content-box;` 超出的部分，将裁剪掉。属性值可以是：
+
+ - `border-box` 超出 border-box 的部分，将裁剪掉
+
+ - `padding-box` 超出 padding-box 的部分，将裁剪掉
+
+ - `content-box` 超出 content-box 的部分，将裁剪掉
+
+假设现在有这样的属性设置：
+
+```css
+ background-origin: border-box;
+
+ background-clip: content-box;
+```
+
+上方代码的意思是，背景图片从**边框部分**开始加载，但是呢，超出**内容区域**的部分将被裁减掉。
+
+## 同时设置多个背景
+
+我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。
+
+代码举例：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+实现效果如下：
+
+
+
+上方代码中，我们其实给盒子设置了五张小图，拼成的一张大图。当改变浏览器窗口大小时，可以自适应布局。
+
+
+## clip-path：裁剪出元素的部分区域做展示
+
+`clip-path`属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
+
+虽然`clip-path`不是背景属性，但这个属性非常强大，但往往会结合背景属性一起使用，达到一些效果。
+
+举例：（鼠标悬停时，放大裁剪的区域）
+
+```css
+ .div1 {
+ width: 320px;
+ height: 320px;
+ border: 1px solid red;
+ background: url(http://img.smyhvae.com/20191006_1410.png) no-repeat;
+ background-size: cover;
+
+ /* 裁剪出圆形区域 */
+ clip-path: circle(50px at 100px 100px);
+ transition: clip-path .4s;
+ }
+ .div1:hover{
+ /* 鼠标悬停时，裁剪出更大的圆形 */
+ clip-path: circle(80px at 100px 100px);
+ }
+```
+
+`clip-path`属性的好处是，即使做了任何裁剪，**容器的占位大小是不变的**。比如上方代码中，容器的占位大小一直都是 320px * 320px。这样的话，也方便我们做一些动画效果。
+
+`clip-path: polygon()`举例：
+
+
\ No newline at end of file
diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241014-\344\274\252\347\261\273\351\200\211\346\213\251\345\231\2504.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241014-\344\274\252\347\261\273\351\200\211\346\213\251\345\231\2504.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c4bb5dafa9a1f5ff9d0f045b6984d72ad351a9d2
--- /dev/null
+++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241014-\344\274\252\347\261\273\351\200\211\346\213\251\345\231\2504.md"
@@ -0,0 +1,64 @@
+### 静态伪类选择器、动态伪类选择器
+伪类选择器分为两种:
+1. **静态伪类**：只能用于**超链接**的样式：
+ - `:link` 超链接点击之前
+ - `:visited` 链接被访问过之后
+ 注：以上两种样式，只能用于超链接。
+
+2. **动态伪类**：针对**所有标签**都适用的样式：
+ - `:hover` “悬停”：鼠标放到标签上的时候
+ - `:active` “激活”： 鼠标点击标签，但是不松手时。
+ - `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
+
+## 超链接a标签
+
+`a标签`有4种伪类（即对应四种状态）：
+
+- `:link` “链接”：超链接点击之前
+- `:visited` “访问过的”：链接被访问过之后
+- `:hover` “悬停”：鼠标放到标签上的时候
+- `:active` “激活”： 鼠标点击标签，但是不松手时。
+
+- 例：
+```html
+
+```
+
+### 超链接的美化
+- 注：在css中，这四种状态**必须按照固定的顺序写**：a:link 、a:visited 、a:hover 、a:active
+
+- 当我们在定义`a:link`和 `a:visited`这两个伪类的时候，如果它们的属性相同，我们其实可以写在一起，用逗号隔开就好
+
+- `a:link`、`a:visited`都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态（前提是都具有了相同的属性）
+
+## 动态伪类举例
+
+我们在第一段中描述过，下面这三种动态伪类，针对所有标签都适用:
+- `:hover` “悬停”：鼠标放到标签上的时候
+- `:active` “激活”： 鼠标点击标签，但是不松手时。
+- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
+
+### 结构伪类
+`:first-child` 其父元素的第一个子元素的样式
+`:last-child` 其父元素的最后一个子元素的样式
+`:nth-child(n)` `n`是一个数字或者一个公式，用来指定要选择的子元素的位置。
\ No newline at end of file
diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241016-css\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247\343\200\201\347\233\222\345\255\220\346\250\241\345\236\213\350\257\246\350\247\243.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241016-css\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247\343\200\201\347\233\222\345\255\220\346\250\241\345\236\213\350\257\246\350\247\243.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4da50694ed8d563fd19e97963653ae4402c51755
--- /dev/null
+++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241016-css\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247\343\200\201\347\233\222\345\255\220\346\250\241\345\236\213\350\257\246\350\247\243.md"
@@ -0,0 +1,263 @@
+# CSS的继承性
+1. 有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是**继承性。**
+2. 继承性是从自己开始，直到最小的元素。
+3. 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
+4. 关于盒子、定位、布局的属性，都不能继承。
+
+### 层叠性：计算权重
+
+1. **层叠性：就是css处理冲突的能力。** 所有的权重计算，没有任何兼容问题！
+
+2. 图中:
+三种选择器同时给P标签增加颜色的属性，但是，文字最终显示的是蓝色，这个时候，就出现了层叠性的情况。
+
+3. 当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
+ - id 选择器
+ - 类选择器、属性选择器、伪类选择器
+ - 标签选择器、伪元素选择器
+ - 因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器
+
+ - 例：如图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。
+
+ - PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）但是没有实战意义！
+
+4. 权重相同时：
+
+
+
+上图可以看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。
+
+5. 继承性造成的影响
+
+这里需要声明一点：
+
+ >如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。
+
+
+### !important标记：优先级最高
+
+来看个很简单的例子：
+
+
+
+上图中，显然id选择器的权重最大，所以文字的颜色是红色。
+
+如果我们想让文字的颜色显示为绿色，只需要给标签选择器的加一个`!important`标记，此时其权重为无穷大。如下：
+
+
+
+important是英语里面的“重要的”的意思。我们可以通过如下语法：
+
+```
+k:v !important;
+```
+
+来给一个属性提高权重。这个属性的权重就是**无穷大**。
+
+注意，一定要注意语法的正确性。
+
+正确的语法：
+
+```
+font-size:60px !important;
+```
+
+### 问题大总结（非常重要）
+
+层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制。
+
+通过列举上面几个例子，我们对权重问题做一个总结。
+
+
+
+上面这个图非常重要，我们针对这个图做一个文字描述：
+
+- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
+- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
+
+# 盒子模型详解
+
+### 前言
+
+盒子模型，英文即box model。无论是div、span、还是a都是盒子。
+
+但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
+
+### 盒子中的区域
+
+一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
+
+- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
+- padding：内边距。
+- border：边框。
+- margin：外边距。
+
+盒子模型的示意图：
+
+
+### ``标签也有margin
+
+``标签有必要强调一下。很多人以为``标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是``，即浏览器。而``是``的儿子。浏览器给``默认的margin大小是8个像素，此时``占据了整个页面的一大部分区域，而不是全部区域
+
+真实占有宽度 = 左border + 左padding + width + 右padding + 右border
+
+## 认识width、height
+
+**如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width**。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。
+
+## 认识padding
+
+### padding区域也有颜色
+
+`padding`就是内边距。`padding`的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充**所有border以内的区域。**
+
+效果如下：
+
+
+
+### padding有四个方向
+
+padding是4个方向的，所以我们能够分别描述4个方向的padding。
+
+方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
+
+小属性的写法：
+
+```css
+ padding-top: 30px;
+ padding-right: 20px;
+ padding-bottom: 40px;
+ padding-left: 100px;
+```
+
+综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
+
+```css
+padding:30px 20px 40px 100px;
+```
+
+如果写了四个值，则顺序为：上、右、下、左。
+
+如果只写了三个值，则顺序为：上、右和左、下。
+
+如果只写了两个值，则顺序为：上和下、左和右。
+
+要懂得，**用小属性层叠大属性**：
+
+```css
+padding: 20px;
+padding-left: 30px;
+```
+### 一些元素，默认带有padding
+
+一些元素，默认带有`padding`，比如ul标签
+可以使用`*`进行清除：
+
+```css
+ *{
+ margin: 0;
+ padding: 0;
+ }
+```
+
+## 认识border
+
+- border就是边框。边框有三个要素：像素（粗细）、线型、颜色。
+- 颜色如果不写，默认是黑色。另外两个属性如果不写，则无法显示边框。
+- 比较稳定的border-style就几个：solid(实线)、dashed（长虚线）、dotted（圆点虚线）。
+
+### border拆分
+
+border是一个大综合属性。比如说：
+
+```css
+border:1px solid red;
+```
+就是把上下左右这四个方向的边框，都设置为 1px 宽度、线型实线、red颜色。
+
+PS：小技巧：在sublime text中，为了快速输入`border:1px solid red;`这个属性，可以直接输入`bd`，然后选第二个后回车。
+
+
+
+
+为了实现上方效果，写法如下：
+
+```css
+border:10px solid red;
+border-style:solid dashed;
+```
+
+border可以没有：
+
+```css
+border:none;
+```
+
+可以某一条边没有：
+
+```css
+border-left: none;
+```
+
+也可以调整左边边框的宽度为0：
+
+```css
+border-left-width: 0;
+```
+
+### 利用 border 属性画一个三角形（小技巧）
+
+完整代码如下：
+
+```css
+div{
+ width: 0;
+ height: 0;
+ border: 50px solid transparent;
+ border-top-color: red;
+ border-bottom: none;
+}
+
+```
+
+步骤如下：
+
+（1）当我们设置盒子的width和height为0时，此时效果如下：
+
+
+
+（2）然后将border的底部取消：
+
+
+
+（3）最后设置border的左边和右边为白色或者**透明**：
+
+
+
+这样，一个直角三角形就画好了。
+
+### 利用 border 属性画一个三角形（更推荐的技巧）
+
+画等边三角形
+
+完整代码如下：（用 css 画等边三角形）
+
+```css
+.div1{
+ width: 0;
+ height: 0;
+ border-top: 30px solid red;
+ /* 通过改变 border-left 和 border-right 中的像素值，来改变三角形的形状 */
+ border-left: 20px solid transparent;
+ border-right: 20px solid transparent;
+}
+
+```
+
+效果如下：
+
+
+
+另外，我们在上方代码的基础之上，再加一个 `border-radus: 20px;` 就能画出一个扇形。
+
+
diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241017-\346\265\256\345\212\250.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241017-\346\265\256\345\212\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..8a8190b2476e32d03e191b44fa67be63d5bd6e54
--- /dev/null
+++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241017-\346\265\256\345\212\250.md"
@@ -0,0 +1,169 @@
+### 标准文档流的特性
+
+**（1）空白折叠现象：**
+
+无论多少个空格、换行、tab，都会折叠为一个空格。
+
+比如，如果我们想让img标签之间没有空隙，必须紧密连接：
+
+```
+
+```
+
+
+**（2）高矮不齐，底边对齐：**
+
+举例如下：
+
+
+
+
+**（3）自动换行，一行写不满，换行写。**
+
+### 行内元素和块级元素
+
+**行内元素和块级元素的区别：**（非常重要）
+
+行内元素：
+
+- 与其他行内元素并排；
+- 不能设置宽、高。默认的宽度，就是文字的宽度。
+
+块级元素：
+
+- 霸占一行，不能与其他任何元素并列；
+- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
+
+**行内元素和块级元素的分类：**
+
+在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。
+
+从HTML的角度来讲，标签分为：
+
+- 文本级标签：`p`、`span`、`a`、`b`、`i`、`u`、`em`。
+- 容器级标签：`div`、`h系列`、`li`、`dt`、`dd`。
+- 行内元素：除了`p`之外，所有的文本级标签，都是行内元素。`p`是个文本级，但是是个块级元素。
+- 块级元素：所有的容器级标签都是块级元素，还有p标签。
+
+### 行内元素和块级元素的相互转换
+我们可以通过`display`属性将块级元素和行内元素进行相互转换。display即“显示模式”。
+
+#### 块级元素可以转换为行内元素：
+```cs
+display: inline;
+```
+inline就是“行内”。也就是说：
+- 此时这个div不能设置宽度、高度；
+- 此时这个div可以和别人并排了。
+
+#### 行内元素转换为块级元素：
+```cs
+display: block;
+```
+block”是“块”的意思。也就是说：
+- 此时这个span能够设置宽度、高度
+- 此时这个span必须霸占一行了，别人无法和他并排
+- 如果不设置宽度，将撑满父亲
+
+## 浮动的清除
+
+> 这里所说的清除浮动，指的是清除浮动与浮动之间的影响。
+
+### 1、加高法
+工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。
+
+```html
+
+
+
+```
+
+
+### 2、`clear:both;`法
+
+最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。
+
+
+```html
+
+
+
+```
+
+浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。
+
+
+
+### 3、隔墙法
+
+在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。
+墙用自己的身体当做了间隙。
+
+```html
+
+
+
+
+
+```
+
+我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动根据自己的儿子撑出高度，我们就要想一些“小伎俩”。
+
+内墙法：
+
+```html
+
+
+
+```
+
+内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。
+
+
+### 4、`overflow:hidden;`
+
+这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。
+我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的偏方。
+并且,overflow:hidden;能够让margin生效。
+
+
+### 5、`::after`
+推荐使用
+```cs
+content="";
+clear:both;
+display:block;
+```
\ No newline at end of file