【CSS】学习笔记 （尚硅谷）

CSS 2（1）

• 💡什么是css

CSS 的全称为：层叠样式表 ( Cascading Style Sheets ) 。CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等等。

• 💭 二、编写位置
  • 2.1行内样式
    •  style 属性中，又称：内联样式

<h1 style=“ color:red;font-size:60px; ”>是 名:值; 的形式。

• • 2.2内部样式
    • 页面内部，提取到<style>标签中。一般放在head标签中。单页面可复用。
  • 2.3外部样式
    • 单独.css文件，引用在HTML中。

h1{           color：red；           font-sixe：40px}  引用 :     <link rel=“stylesheet” href=“./xxx.css"> 写在head中 href来自哪 ，relation文档间关系。完全分离。最多使用！

• **🏃‍♂️三、样式表的优先级 **

行内样式 > 内部样式 = 外部样式    且后来者居上

• 📖 四、css语法规范

选择器   声明块

• 五、代码风格

展开 &紧凑 （上线前软件实现）

• 六、选择器
  • 1.基本选择器
    • 通配选择器—— *

选中所有HTML元素。多用于清除样式。 语法:  *  {                       属性名：属性值；  }

• • • 元素选择器 ——标签名 p、h1......

某一种元素统一设置 ，无法差异化。 语法：   标签名 {                    属性名: 属性值；}

• • • 类选择器  —— .类名 使用频率较高

根据元素class(类名）的 值，来选中元素。 ​注意元素属性不带. 但选择器带 自定义类名不可纯数字，不可中文，-连接 见名知意。 一个元素不能有多个class属性。一个元素class可以有多个值，空格隔开 语法：      . 类名{                    属性名: 属性值；}

• • • id选择器——  #id值  唯一

根据元素的id属性精准选中某个元素。 ​

• • 2.css复合选择器

两大类 之一，复合选择器建立在基本选择器之上，有多个基础选择器，通过不同方式组合而成。快速精准选中元素。

• • • 交集选择器—— 空格连接

相同符合多个条件的元素 （既   又 ；且 ） ​有标签名，在前。 不可能出现两个元素选择器。  语法：  选择器1选择器2选择器3....选择器n{} 例如：类名为beauty的p元素 （用最多）；类名包含rich和beauty的元素

• • • 并集选择器—— ，逗号连接

选中多个选择器对应元素，分组选择器 （或者） 竖着写。 任何形式选择器都可以作为并集一部分。通常用于集体声明，缩小体积。 语法：      选择器1， ​     选择器2，      选择器3，....选择器n{} 例如：选中id为peiqi，或类名为rich。。。的元素

• • • html元素间的关系 后 子 兄弟

①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素 1. 父元素：直接包裹某个元素的元素 2. 子元素：被父元素直接包含的元素 3. 祖先元素：父亲的父亲......，一直往外找，都是祖先。 父元素，也算是祖先元素的一种 4. 后代元素：儿子的儿子..，一直往里找都是后代。子元素也算是后代元素的一种。 ​5. 兄弟元素：具有相同父元素的元素，互为兄弟元素。

• • • 后代选择器   空格

选符合要求的后代。 先祖先，再后代。最终选择后代。符合html嵌套要求。 语法：选择器1  选择器2  选择器3 选择器n{}  （1中的2）

• • • 子代选择器     >

最终子代。 ​语法：选择器1 > 选择器2 > 选择器3 > ...... 选择器n {}

• • • 兄弟选择器  通用 ~ 相邻+ 都是下面

相邻 紧挨着的下一个：语法： 选择器1+选择器2 {} 。 通用  指定元素之后，符合的所有兄弟：语法： 语法： 选择器1 ~选择器2 {} 。

• • • 属性选择器

选中属性值符合一定要求的元素。

• • • • 1. [属性名] 选中具有某个属性的元素。                                                   2. [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。      3. [属性名^="值"] 选中包含某个属性且属性值以指定的值开头的元素。                                                                                                         4. [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素 5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。
    • 伪类选择器  ：

选中特殊状态的元素。

• • • • 动态伪类

：link 超链接未被访问的状态 ：visited 超链接访问过的状态 ：hover 鼠标悬停在元素上的状态 ：active 元素激活的状态，鼠标按下不松 注意LVHA顺序！ ：focus 获取焦点的元素  表单类才能使用：focus伪类  点击 触摸 tab建等方式 ​

• • • •  结构伪类

常用： 1. :first-child 所有兄弟元素中的第一个。 2. :last-child 所有兄弟元素中的最后一个。 3. :nth-child(n) 所有兄弟元素中的第 n 个。 4. :first-of-type 所有同类型兄弟元素中的第一个。 5. :last-of-type 所有同类型兄弟元素中的最后一个。 6. :nth-of-type(n) 所有同类型兄弟元素中的 第n个。    ​  关于n的值  1. 0 或 不写 ：什么都选不中 —— 几乎不用。 2. n ：选中所有子元素 —— 几乎不用。 3. 1~正无穷的整数 ：选中对应序号的子元素。 4. 2n 或 even ：选中序号为偶数的子元素。 5. 2n+1 或 odd ：选中序号为奇数的子元素。 6. -n+3 ：选中的是前 3 个。  ​了解： 1. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个。 ​2. :nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个 。 ​3. :only-child 选择没有兄弟的元素（独生子女）。 ​4. :only-of-type 选择没有同类型兄弟的元素。 ​5. :root 根元素。6. :empty 内容为空元素（空格也算内容）。  

• • • • 否定伪类

​：not（选择器）排除满足括号中条件的元素；

• • • • UI伪类

：checked 被选中的复选框或单选按钮。 ：enable 可用的表单元素。（没有disabled属性） ：disabled 不可用的表单元素。（有disabled属性）

• • • • 目标伪类

:target 选中锚点指向的元素。

• • • • 语言伪类

:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）。

• • • 伪元素选择器  ：：

选中元素中的一些特殊位置 常用伪元素 ::first-letter 选中元素中的第一个文字。 ​::first-line 选中元素中的第一行文字。 ​::selection 选中被鼠标选中的内容。 ​::placeholder 选中输入框的提示文字。 ​::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。 ​::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。 ​

• • 3.选择器的优先级（权重）（a，b，c）
    • 通过不同的选择器，选中相同的元素 ，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了。
    • ！important(属性后）>行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。
    • 

     

     

• 七、CSS三大特性
  • 层叠性 根据优先级进行样式覆盖
  • 继承性 元素自动拥有其父元素或其祖上元素上所设置的某些样式。优先继承离得近的  text-??, font-??,line-?? ， color-？？...... 参考网站mdn查询可继承性
  • 优先级 !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式。详细聊：需要计算权重
• 八、CSS常用属性
  • 1. 像素的概念概念：
    • 我们的电脑屏幕是，是由一个一个“小点”组成的，每个“小点”，就是一个像素（px）。规律：像素点越小，呈现的内容就越清晰、越细腻。
  • 2. 颜色的表示
    • 编写方式 使用颜色对应的英文单词（参考文档），编写简单。
    • rgb或rgba

红绿蓝 透明度 数字或百分比 值相同为灰色 值越大 灰越浅

• • • HEX或HEXA

分三组 #rrggbb  取值0~f  每两位都相同可以缩写 

• • • HSL或HSLA

色相0~360度 ，饱和度0%~100% 添加灰色 ，亮度 0%~100% 黑到白 ，透明度。

• • 3.字体属性css
    • 3.2字体大小
      • 属性名： font-size
      • 控制字体大小 语法：div {font-size：40px}
      • . Chrome 浏览器支持的最小文字为 12px ，默认的文字大小为 16px ，并且 0px 会自动消失。2. 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。3. 通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了。
    • 3.2字体族
      • 属性名： font-family
      • 作用：控制字体类型。
      • 语法：div {font-family: "STCaiyun","Microsoft YaHei",sans-serif}
      • 注意：1. 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找。2. 如果字体名包含空格，必须使用引号包裹起来。3. 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上 serif （衬线字体）或 sans-serif （非衬线字体）。4. windows 系统中，默认的字体就是微软雅黑
    • 3.3 字体风格
      • 属性名：font-style
      •  作用：控制字体是否为斜体。
      • 常用值：
        • 1. normal ：正常（默认值）
        • 2. italic ：斜体（使用字体自带的斜体效果）
        • 3. oblique ：斜体（强制倾斜产生的斜体效果）实现斜体时，更推荐使用 italic 。
      • 语法： div {font-style: italic;}
    • 3.4字体粗细
      • 属性名： font-weight
      • 作用：控制字体的粗细。
      • 常用值：
      • 关键词
        • 1. lighter ：细
        • 2. normal ： 正常
        • 3. bold ：粗
        • 4. bolder ：很粗 （多数字体不支持）
      • 数值：
        • 1. 100~1000 且无单位，数值越大，字体越粗 （或一样粗，具体得看字体设计时的精确程度）。
        • 2. 100~300 等同于 lighter ， 400~500 等同于 normal ， 600 及以上等同于bold 。
      • 语法：div {font-weight: bold;}div {font-weight: 600;
    • 3.5字体复合写法
      • 属性名： font ，可以把上述字体样式合并成一个属性。
      • 作用：将上述所有字体相关的属性复合在一起编写。
      • 编写规则：
        • 1. 字体大小、字体族必须都写上。
        • 3. 各个属性间用空格隔开。实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用 font-size 属性。
        • 2. 字体族必须是最后一位、字体大小必须是倒数第二位。
  • 4.CSS文本属性
    • 4.1文本颜色
      • 属性名： color
      • 作用：控制文字的颜色。
      • 可选值：
        • 1. 颜色名
        • 2. rgb 或 rgba
        • 3. HEX 或 HEXA （十六进制）
        • 4. HSL 或 HSLA
        • 开发中常用的是： rgb/rgba 或 HEX/HEXA （十六进制）。
      • div {color: rgb(112,45,78);}
    • 4.2 文本间距
      • 字母间距： letter-spacing
      • 单词间距： word-spacing （通过空格识别词）
      • 属性值为像素（ px ），正值让间距增大，负值让间距缩小。
    • 4.3 文本修饰
      • 属性名： text-decoration
      • 作用：控制文本的各种装饰线。
      • 可选值：
        • 1. none ： 无装饰线（常用）
        • 2. underline ：下划线（常用）
        • 3. overline ： 上划线
        • 4. line-through ： 删除线
      • 可搭配如下值使用：
      • 1. dotted ：虚线
      • 2. wavy ：波浪线
      • 3. 也可以指定颜色
      • a {text-decoration: none;}
    • 4.4文本缩进
      • 属性名： text-indent 。
      • 作用：控制文本首字母的缩进。
      • 属性值： css 中的长度单位，例如： px
      • 举例：div {text-indent:40px;}
      • 后面我们会学习 css 中一些新的长度单位，目前我们只知道像素( px )。
    • 4.5 文本对齐_水平
      • 属性名： text-align 。
      • 作用：控制文本的水平对齐方式。
      • 常用值：
        • 1. left ：左对齐（默认值）
        • 2. right ：右对齐
        • 3. center ：居中对齐
        • div {  text-align :center;}
    • 4.6 细说font-size
      • 1.由于字体设计原因，文字最终呈现的大小，并不一定与font-size的值一致，可能大，小。
      • 2.通常情况下，文字相对字体设计框，并不是垂直居中的，通常靠下一点。
    • 4.7行高
      • 属性名： line-height
      • 作用：控制一行文字的高度。
      • 可选值：
        • 1. normal ：由浏览器根据文字大小决定的一个默认值。
        • 2. 像素( px )。
        • 3. 数字：参考自身 font-size 的倍数（很常用）。1.5～2倍
        • 4. 百分比：参考自身 font-size 的百分比。
        • 备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。
      • 行高注意事项：
        • 1. line-height 过小会怎样？—— 文字产生重叠，且最小值是 0 ，不能为负数。
        • 2. line-height 是可以继承的，且为了能更好的呈现文字，最好写数值。
        • 3. line-height 和 height 是什么关系？设置了 height ，那么高度就是 height 的值。不设置 height 的时候，会根据 line-height 计算高度。
      • 应用场景：
        • 1. 对于多行文字：控制行与行之间的距离。
        • 2. 对于单行文字：让 height 等于 line-height ，可以实现文字垂直居中。
        • 备注：由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。
    • 4.8 文本对齐_垂直
      • 1. 顶部：无需任何属性，在垂直方向上，默认就是顶部对齐。
      • 2. 居中：对于单行文字，让 height = line-height 即可。
      • 问题：多行文字垂直居中怎么办？—— 后面我们用定位去做。
      • 3. 底部：对于单行文字，目前一个临时的方式：让 line-height = ( height × 2 ) - font-size - x 。
      • 备注： x 是根据字体族，动态决定的一个值。问题：垂直方向上的底部对齐，更好的解决办法是什么？—— 后面我们用定位去做。
    • 4.9vertical-align
      • 属性名： vertical-align 。
      • 作用：用于指定同一行元素之间，或 表格单元格 内文字的 垂直对齐方式。
      • 常用值：
        • 1. baseline （默认值）：使元素的基线与父元素的基线对齐。
        • 2. top ：使元素的顶部与其所在行的顶部对齐。
        • 3. middle ：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。
        • 4. bottom ：使元素的底部与其所在行的底部对齐。
        • 特别注意： vertical-align 不能控制块元素。
  • 5.CSS列表属性
    • 列表相关的属性，可以作用在ul 、 ol 、 li元素上。

• • 6.CSS表格属性
  • 1. 边框相关属性（其他元素也能用）：盒子模型详细讲

• • 2..表格独有属性（只有 table 标签才能使用）：

• • 7.CSS背景属性

• • 8.css鼠标属性

• 九、CSS盒子模型
  • 1.CSS长度单位
    • 1. px ：像素。
    • 2. em ：相对元素 font-size 的倍数。
    • 3. rem ：相对根字体大小，html标签就是根。
    • 4. % ：相对父元素计算。
    • 注意： CSS 中设置长度，必须加单位，否则样式无效！
  • 2.元素的显示模式
    • 块元素(block)

又称：块级元素 特点： 1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。 2. 默认宽度：撑满父元素。 3. 默认高度：由内容撑开。 4. 可以通过 CSS 设置宽高。

• • • • 显示模式：
        • 1. 主体结构标签：  <html> ,<body>
        • 2. 排版标签：

<h1>~<h6>, 标题 <hr>语义术语表示段落级元素之间的主题转换（一条水平线）, <p> 用于定义段落（paragraph）中的文本内容。它会在文本前后创建一些间距。 <pre> 用于定义预格式化（preformatted）文本内容，按照原文显示。 <div>是一个通用的容器标记，用于组合其他 HTML 元素和创建自定义的布局。它不会自带任何样式或格式，需要使用 CSS 来控制其外观和行为

• • • • • 3.列表标签：

<ul> :一系列无序的列表项目，通常渲染为项目符号列表。 <ol>:表示有序列表，通常渲染为一个带编号的列表 <li>:  用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表 ([<ol>]，一个无序列表 (<ul>)，或者一个菜单 (<menu>)。   <dl> :一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。,术语（<dt>）用于表示要定义的名称或术语，而描述（<dd>）则用于提供对应的解释或描述

• • • • • 表格相关标签：

<table> 元素表示表格数据——即在一个由包含数据的行和列组成的二维表格中呈现的信息。 <tbody> 元素封装了一系列表格的行（<tr>元素），代表了它们是表格（<table>）主要内容的组成部分。 <thead> 元素定义了一组定义表格的列头的行。 <tr> 元素定义表格中的行。同一行可同时出现<td> 和<th>元素。 <tfoot> 定义了一组表格中各列的汇总行。 <caption> 展示一个表格的标题，

• • • • • <from>与<option>
    • 行内元素（inline）

又称：内联元素 特点: 1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。 2. 默认宽度：由内容撑开。 3. 默认高度：由内容撑开。 4. 无法通过 CSS 设置宽高。

• • • • 显示模式：
        • 1. 文本标签：

  <br> 插入一个换行符、  <em>用于将文本标记为强调，斜体 、  <strong> 用于将文本标记为强调，粗体、  <sup> 将文本标记为上标、 <sub> 、  <del>被删除的文本 、  <ins>被插入的文本

• • • • • 2.

<a> 标签用于创建一个链接（link） ​<label> 标签用于给页面上的表单元素提供文本标签，使用户知道该输入字段或控件的用途。通常与 <input> 元素结合使用，建立关联。

• • • 行内块元素（inline-block）

又称：内联块元素 特点： 1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。 2. 默认宽度：由内容撑开。 3. 默认高度：由内容撑开。 4. 可以通过 CSS 设置宽高。

• • • 注意：元素早期只分为：行内元素、块级元素，区分条件也只有一条："是否独占一行"，如果按照这种分类方式，行内块元素应该算作行内元素。
    • 显示模式：

1. 图片： <img> ​2. 单元格： <td> 、 <th> ​3. 表单控件： <input> 、 <textarea> 、 <select> 、 <button> ​4. 框架标签： <iframe>

• • 3. 修改元素的显示
    • 模式通过 CSS 中的 display 属性可以修改元素的默认显示模式，常用值如下

• • 4.盒子模型的组成
    • CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。

• • • • 1. margin（外边距）： 盒子与外界的距离。
      • 2. border（边框）： 盒子的边框。
      • 3. padding（内边距）： 紧贴内容的补白区域。
      • 4. content（内容）：元素中的文本或后代元素都是它的内容。
      • 盒子的大小 = content + 左右 padding + 左右 border 。
      • 注意：外边距 margin 不会影响盒子的大小，但会影响盒子的位置。
  • 5.盒子内容区(content)

• • 6.关于默认宽度
    • 所谓的默认宽度，就是不设置 width 属性时，元素所呈现出来的宽度。
    • 总宽度 = 父的content— 自身的左右 margin。
    • 内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右padding 。
  • 7.盒子内边距（padding）
    • padding 复合属性的使用规则：
    • 1. padding: 10px; 四个方向内边距都是 10px 。
    • 2. padding: 10px 20px; 上 10px ，左右 20px 。（上下、左右）
    • 3. padding: 10px 20px 30px; 上10px，左右 20px ，下 30px 。（上、左右、下）
    • 4. padding: 10px 20px 30px 40px; 上 10px ，右 20px ，下 30px ，左 40px 。（上、右、下、左）

• • • 注意点：
    • 1. padding 的值不能为负数。
    • 2. 行内元素 的 左右内边距是没问题的，上下内边距不能完美的设置。
    • 3. 块级元素、行内块元素，四个方向内边距都可以完美设置。
  • 8.盒子边框（border）
    • 边框相关属性共 20 个。border-style 、 border-width 、 border-color 其实也是复合属性。

• • 9.盒子外边框 _margin

• • • margin注意事项：
      • 1. 子元素的 margin ，是参考父元素的content计算的。（因为是父亲的 content 中承装着子元素）
      • 2. 上 margin 、左 margin ：影响自己的位置；下 margin 、右 margin ：影响后面兄弟元素的位置。
      • 3. 块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右margin 可以完美设置，上下 margin 设置无效。
      • 4. margin 的值也可以是auto，如果给一个块级元素设置左右 margin 都为 auto ，该块级元素会在父元素中水平居中。
      • 5. margin 的值可以是负值
    • margin塌陷问题：
      • 什么是 margin 塌陷？

第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。

• • • • 如何解决 margin 塌陷？

方案一： 给父元素设置不为 0 的 padding 。 方案二： 给父元素设置宽度不为 0 的 border 。 方案三：给父元素设置 css 样式overflow:hidden

• • • margin合并问题：
      • 什么是 margin 合并？

上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

• • • • 如何解决 margin 塌陷？

无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

• • 10.处理内容溢出

• • 11.隐藏元素的方式
    • 方式一：visibility 属性
      • visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏。元素看不见了，还占有原来的位置（元素的大小依然保持）。
    • 方式二： display 属性
      • 设置 display:none ，就可以让元素隐藏。彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。
  • 12.样式的继承
    • 有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。
    • 会继承的 css 属性
      • 字体属性、文本属性（除了vertical-align）、文字颜色 等。
    • 不会继承的 css 属性
      • 边框、背景、内边距、外边距、宽高、溢出方式 等。
    • 一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。
  • 13.默认样式
    • 元素一般都些默认的样式，例如：
    • 1. <a> 元素： 文字加粗、文字大小、上下外边距。
    • 2.<h1> ~ <h6> 元素： 文字加粗、文字大小、上下外边距。
    • 3.  <p>元素：上下外边距
    •  4.   <ul>,<ol> 元素：左内边距
    •  5.< body> 元素： 8px 外边距（4个方向） ......
    • 优先级：元素的默认样式 > 继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择器 到该元素。
  • 14.布局技巧

• • 15.元素之间的空白问题
    • 产生的原因
      • 行内元素，行内块级元素，彼此之间的换行会被浏览器解析为一个空白字符
    • 解决方案
      • 方案一 去掉换行和空格（不推荐）
      • 方案二 给父元素设置 font-size：0，再给需要显示文字的元素，单独设置字体大小。（推荐）
  • 16.行内快的幽灵空白问题
    • 产生原因
      • 行内块元素与文本的基本对齐，二文本的基线与文本最低端之间是有一定距离的
    • 解决方案
      • 方案一：  给行内块设置vertical ，值不为baseline即可，设置为 middel 、 bottom 、top 均可。
      • 方案二： 若父元素中只有一张图片，设置图片为 display:block 。
      • 方案三： 给父元素设置 font-size: 0 。如果该行内块内部还有文本，则需单独设置 font-size 。
• 十、浮动
  • 1.浮动的简介
    • 在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。
  • 2.元素浮动后的特点
    • 1. 🤢脱离文档流。
    • 2. 😊不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。
    • 3. 😊不会独占一行，可以与其他元素共用一行。
    • 4. 😊不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
    • 5. 😊不会像行内块一样被当做文本处理（没有行内块的空白问题）。
  • 3.练习浮动
    • 盒子1右浮动，效果如下

• • • 盒子1左浮动

• • • 所有盒子都浮动

• • • 所有盒子浮动后，盒子3落下来

• • • 所有盒子浮动后，盒子3卡住了
  • 4.解决浮动产生的影响
    • 4.1 元素浮动后具有哪些影响
      • 对兄弟元素的影响 ：  后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
      • 对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。
  • 4.2 解决浮动产生的影响（清除浮动）
    • 1. 方案一： 给父元素指定高度。
    • 2. 方案二： 给父元素也设置浮动，带来其他影响。
    • 3. 方案三： 给父元素设置 overflow:hidden 。
    • 4. 方案四： 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
    • 5. 方案五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。
    • ===> 推荐使用

.parent::after { ​content: ""; ​display: block; ​clear:both; }

• • • 布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。