19-元素显示模式及浮动（CSS3）
知识目标
- 掌握标准文档流的解析规则
- 掌握元素的显示模式
- 掌握元素浮动属性语法与使用
- 掌握浮动塌陷解决方法
1. 标准文档流
2. 元素显示模式
元素显示模式就是元素（标签）以什么方式进行显示，比如<div>独占一行，一行可以放多个<span>。HTML元素一般分为块元素和行内元素两种类型。
2.1 块状元素
常见的块状元素
<div>、<p>、<h1> - <h6>、<ul>、<ol>、<li>、<form> 等。
特点：
- 独占一行：块状元素在页面中会独自占据一行空间，无论其内容多少，后续元素会自动换行显示。
- 可设置宽度和高度：能够通过 CSS 的 width 和 height属性来明确指定其宽度和高度。若未设置宽度，默认会占据父元素的全部宽度。
- 可设置内外边距：可以使用 padding（内边距）和 margin（外边距）属性来调整元素与内容、其他元素之间的距离。
- 宽度默认是容器（父级宽度）的100%。
- 是一个容器/盒子，里面可以放行内或者块级元素。
注意：
- 文字类的元素内不能包含块级元素，如
<h1>~<h6>； <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>；
2.2 行内元素
常见的行内元素
<a>、<img>、<input>、<label>、<select>、<textarea>、<span> 等。
特点：
- 不独占一行：行内元素会在同一行内显示，不会强制换行，多个行内元素可以并排显示。
- 宽度和高度由内容决定：无法通过 CSS 的 width 和 height 属性来设置其宽度和高度，其大小取决于元素内部的内容。
- 内外边距设置受限：水平方向的 padding 和 margin 可以正常设置，但垂直方向的 padding 和 margin设置可能不会产生预期效果。
- 行内元素只能容纳文本或其他行内元素。
注意：
- 链接里面不能再放链接
- 特殊情况链接
<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。
2.3 行内块元素
在行内元素中有几个特殊的标签——<img />、<input />、<td>， 它们同时具有块元素和行内元素的特点。没有专门的学名，只是有些资料称它们们行内块元素。
特点：
- 和相邻内元素(行内块)在一行上，但是他们之间会有空白缝隙，一行可以显示多个(行内元素特点)。
- 默认宽度就是它本身内容的宽度(行内元素特点)。
- 高度、行高、外边距以及内边距都可以控制(块级元素特点)。
2.4 显示模式总结
2.5 显示模式转换-display属性
question: 为什么要对元素进行转换？
回答：网页是由多个块元素和行内元素构成的盒子排列而成的。如果希望行内元素具有块元素的某些特性，例如可以设置宽高，或者需要块元素具有行内元素的某些特性，例如不独占一行排列，可以使用display属性对元素的类型进行转换。
3. 盒子浮动属性语法与使用
3.1 float属性
元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。
设置浮动属性的语法格式：选择器{float:属性值;}
常用属性值：left 左浮动 right 右浮动 none 不浮动（默认值）
3.2 clear属性
为什么要清除浮动？在网页中，由于浮动元素不再占用原文档流的位置，使用浮动时会影响后面相邻的固定元素，这时，如果要避免浮动对其他元素的影响，就需要清除浮动。
清除浮动的语法格式： 选择器{clear:属性值;}
clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时，经常会遇到一些特殊的浮动影响。
由于子元素和父元素为嵌套关系，不存在左右位置，所以使用clear属性并不能清除子元素浮动对父元素的影响。
3.3 浮动塌陷解决办法
3.3.1 浮动塌陷产生的原因
在正常的文档流中，元素会按照从上到下、从左到右的顺序依次排列，父元素的高度会根据子元素的高度自动调整。但当子元素设置了 float 属性（如 float: left 或 float: right）后，子元素会脱离正常的文档流，不再占据原有的空间，此时父元素就无法感知到子元素的高度，从而导致父元素的高度塌陷为 0。
如下案例：因子类浮动导致父类高度为0。
3.3.2 浮动塌陷解决方案
解决方案1： 给父元素设置固定的高度
解决方案2： 使用clear属性创建空元素
在浮动元素的末尾添加一个空的块级元素，并为其设置 clear: both 属性，强制该元素在浮动元素之后显示，从而撑开父元素的高度。该方法会多很多无用标签。
解决方案3：使用BFC（块级格式化上下文）
BFC 是一个独立的渲染区域，规定了内部的块级元素如何布局，并且与外部元素相互隔离。可以通过为父元素设置一些特定的 CSS 属性来创建 BFC，从而使其包含浮动的子元素。此种方法代码简洁，但无法显示溢出部分。常见的创建 BFC 的方式有：
- float 值为 left 或 right
- overflow 值不为 visible（如 overflow: auto 或 overflow: hidden）
- display 值为 inline-block、table-cell 等
.parent {
border: 2px solid red;
overflow: auto; /* 创建 BFC */
}
**解决方案4：**使用伪元素清除浮动
这是一种比较常用且推荐的方法，通过为父元素添加伪元素，并为伪元素设置 clear: both 属性来清除浮动。没有增加标签，结构简单。但是属性CSS3特性。
.parent::after {
content: "";
display: block;
clear: both;
}