【CSS 定位属性（Position）】

最新推荐文章于 2024-03-30 14:41:35 发布

Hey_Coder

最新推荐文章于 2024-03-30 14:41:35 发布

阅读量445

点赞数

分类专栏：【CSS】文章标签：元素的定位类型position属性元素的浮动类型float 定位元素的偏移量top right bottom left 元素的显示类型 display 定位元素的层叠属性z-index

本文链接：https://blog.csdn.net/VickyTsai/article/details/103439673

版权

【CSS】专栏收录该内容

28 篇文章 3 订阅

订阅专栏

CSS 定位属性 Position

CSS 定位属性

用于	属性名	CSS 版本
① 设置元素的位置/定位类型 (静态/ 相对/ 绝对/ 固定/ 粘性, 搭配 `top/ right/ bottom/ left` 属性)。	`position`	2
❶ 定位元素的上偏移量 (长度值/百分比值/不偏移 `auto`, 搭配 `position` 属性)。	`top`	2
❷ 定位元素的右偏移量 (搭配 `position` 属性)。	`right`	2
❸ 定位元素的下偏移量 (搭配 `position` 属性)。	`bottom`	2
❹ 定位元素的左偏移量 (搭配 `position` 属性)。	`left`	2
❺ 定位元素和伸缩项的层叠顺序 (`auto`/ 整数值, 搭配 `position` 顺序)。	`z-index`	2
❻ 绝对/固定定位元素的可见区域 (剪切区域) (搭配 `position` 属性, 可指定四条剪切线的位置 , 已废弃，用 `clip-path` 替代)。	~~`clip`~~	2
② 设置元素的浮动方向 (不浮动 `none`/左浮动/右浮动/开始处/结束处)。	`float`	1
❶ 清除前面的浮动元素的浮动 (清除类型 = 前面的浮动元素的类型,搭配 `float` 属性)。	`clear`	1
③ 设置元素的显示类型 / 框的类型 (元素和子元素的布局)。	`display`	1

1. position 属性: 设置元素的位置/定位类型 (静态/ 相对/ 绝对/ 固定/ 粘性, 搭配 top/ right/ bottom/ left 属性)

涉及内容较多,另写了一个博客: 点击查看详情: 【CSS 定位之 position 属性】

1.1 top 属性: 定位元素的上偏移量 (长度值/百分比值/不偏移 auto, 搭配 position 属性)

⑴ 设置定位元素的上偏移量: top
- ① 偏移距离范围
  - ❶ 相对定位元素 relative的 偏移范围 = 上边框的外边界和原位置的上边框的外边界之间的距离 (相对于自身的位置) = 距离原位置 之间的距离
    - top: 50px; (因为原位置与右边的元素平行,所有, 这里用右边的元素做参照。)
  - ❷ 绝对定位元素 absolute的 偏移范围 = 上外边距的外边界 与其包含块的 边框的内边界 之间的偏移距离。
    - top: 50px; = 定位元素的上外边距的外边界到包含块的边框的内边距的距离
    - 上偏移量不包括的范围: 不包括包含块的边框宽度 ,也不包括定位元素的上外边距宽度。
      - 其他偏移量 bottom,right,left 也是如此。
- ② 适用对象: 定位元素
  - 定位元素 = 非静态元素 = position 值 ≠static的元素 = position值 = relative | absolute | fixed | sticky的元素
- ③ 不适用对象: 非定位元素 = 静态元素 = 元素的默认定位 = position 值＝ static的元素
  - 静态元素(普通元素),不会有任何偏移效果。除了设置了不同static的 position值。

⑵ 偏移量的优先级: 根据高度是否固定值决定。
- ① 高度不固定时: 上/下偏移量都有效
  - 当top和bottom 同时指定时，并且 height 没有被指定或者指定为 auto或100% 的时候，top和 bottom都会生效
- ② 高度为固定值时: 上偏移量 top 优先
  - 如果 height 被限制，则 top 属性会优先设置，bottom 属性则会被忽略。

⑶ 上偏移量的语法
- top: auto|%|length|inherit;

/* 长度值 <length> values */
top: 3px;
top: 2.4em;

/* 包含块的高度 百分比值 <percentage>s of the height of the containing block */
top: 10%;

/* 关键字值 Keyword value */
top: auto;

/* 全局值 Global values */
top: inherit;
top: initial;
top: unset;

⑷ 上偏移量的属性值
- 长度值/百分比值/不偏移 auto
- ① 长度值: <length>
  - 可以是负的，正的或者 null 长度值表示。
- ② 百分比值(包含块高度): %, <percentage>
  - 元素包含块的高度的百分比。
- ③ 不偏移(不指定偏移量): auto
  - 下偏移量bottom优先: 将忽略 top属性,以 bottom 偏移量属性为准。
  - 不偏移: 如果bottom也为auto 未指定具体值的话，元素的垂直位置 = 作为静态(即static)元素时该在的位置, 即不偏移。

上偏移量的浏览器支持
- 在 IE7之前，当同时指定top和 bottom时，元素位置被过度约束，top属性具有优先级;将bottom的计算值设置为-top，而忽略其指定值。

相关示例,参见 position 属性的示例。

1.2 bottom 属性: 定位元素的下偏移量 (搭配 position 属性)

⑴ 设置定位元素的下偏移量: bottom 属性
- 偏移距离范围 : 与 top属性相同, 只是方向不同。
⑵ 下偏移量的语法和属性值: 与 top属性相同, 只是方向不同。

1.3 left 属性: 设置定位元素的左偏移量 (搭配 position 属性)

⑴ 设置定位元素的左偏移量: left 属性
- 偏移距离范围 : 与 top属性相同, 只是方向不同。
⑵ 左偏移量的语法和属性值: 与 top属性相同, 只是方向不同。
⑶ 百分比值: 相对于包含块的宽度的百分比。

1.4 right 属性: 设置定位元素的右偏移量 (搭配 position 属性)

⑴ 设置定位元素的右偏移量: right 属性
- 偏移距离范围 : 与 top属性相同, 只是方向不同。
⑵ 右偏移量的语法和属性值: 与 top属性相同, 只是方向不同。
⑶ 百分比值: 相对于包含块的宽度的百分比。

1.5 z-index 属性: 设置定位元素和伸缩项的层叠顺序 (auto/ 整数值, 搭配 position 顺序)

⑴ 设置定位元素和伸缩项的层叠顺序: z-index 属性
- ① 适用对象: ❶ 定位元素 (非静态元素= position ≠ static的元素) + ❷ 伸缩项 (flex items)
  - z-index 设置定位元素及其后代元素或伸缩项(flex items) 的 z 轴顺序 (z-order,即层叠次序)。
- ② 层叠次序:
  - 当元素之间重叠的时候， z-index 值较大的元素会覆盖在较小的元素上方 = 在上层显示。

⑵ 二维坐标系(普通文档流) 和不重叠:
- 没有重叠: 一般情况下，页面可以被认为是二维的，因为文本、图像和其他元素被安排在页面上而没有重叠。
  - 在这种情况下，只有一个渲染进程，所有元素都知道其他元素占用的空间。
⑶ 三维坐标系和层叠 (元素相互覆盖)
- ① 盒模型和三维坐标系:
  - 在 CSS 2.1 中, 所有的盒模型元素都处于三维坐标系中。
- ② z 轴顺序:
  - 除了我们常用的 x横坐标和 y纵坐标，盒模型元素还可以沿着“z轴”层叠摆放，当他们相互覆盖时， z轴顺序就变得十分重要。

⑷ 定位元素和层叠次序:
- ① 层叠次序: z-index 属性允许在呈现内容时调整对象的层叠顺序。
- ② 定位元素和元素相互覆盖
  - 比如在定位元素中,绝对定位元素，从文档流中删除重新定位，此时可能出现和文档中其他元素相互重叠/覆盖的可能，这个时候谁在上谁在下,谁覆盖谁，就需要设置了，z-index 就有了存在的意义。
- ③ 定位元素的层叠次序和层叠上下文
  - 即 position 值 ≠ static的元素，z-index属性指定：
    - ❶ 层叠层级: 盒子在当前层叠上下文中的层叠层级。
    - ❷ 本地层叠上下文: 盒子是否创建一个本地层叠上下文。

⑸ 层叠放置: CSS 允许在现有的渲染引擎上层叠地摆放盒模型元素。
- ① z 轴元素的顺序: z-index 属性来指定。
- ② z 轴方向: 相当于垂直于屏幕，指向用户。
  - ❶ 整数: 所有的层都可以用一个整数( z 轴顺序)来表示 = 当前层在 z 轴的位置。
  - ❷ 数字越大: 元素越接近用户。
    - 覆盖在上方: 数字大的元素, 层叠/覆盖在数字小的元素的上方。

⑹ 层叠顺序的语法
- z-index: auto | <integer>|inherit;

/* 关键字值 Keyword value */
z-index: auto;

/* 整数值 <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Negative values to lower the priority */

/* 全局值 Global values */
z-index: inherit;
z-index: initial;
z-index: unset;

⑺ 层叠顺序的属性值
- 与父元素的层叠级别相同 auto/ 层叠级别
- ① 和包含块层层叠级别相同 (默认值): auto
  - 不创建新的本地层叠上下文:
    - 该盒子不会创建一个新的本地层叠上下文。
  - 与包含块层叠级别相同:
    - 当前层叠上下文中生成的盒的层叠级别 = 父盒子(包含块)的层叠级别。
- ② 整数值(层叠级别): <integer>
  - 设置元素的层叠顺序。
  - 整数值 = (当前层叠上下文中生成的盒子的) 层叠级别。
  - 本地层叠上下文:
    - 该盒子还会创建一个本地层叠上下文，层叠级别 = 0。
    - (设置层叠级别的元素的) 后代不和其他元素的层叠级别做比较:
      - 后代元素的 z-index 不和该元素之外的其他元素的 z-index 进行对比。
- 负值: 层叠顺序(层叠级别) 可以为负值
  - 正整数: 则离用户更近。
  - 负整数: 则离用户更远。

⑻ 不指定 z-index 属性时的层级
- 默认层级 0 层:
  - 当没有指定 z-index 的时候，所有元素都在会被渲染在默认层(0层)
- 同一级:
  - 当多个元素的 z-index 属性相同的时候(在同一个层里面)，那么将按照以下描述的规则进行布局。
⑼ 不指定 z-index 属性 (同一层级)时的层叠顺序
- 当没有元素指定 z-index 属性时，元素按照如下顺序层叠（从底层到最上层顺序）：
  - ① 根元素的背景和边框。
  - ② 非定位元素 = 静态块元素(position:static;)
    - 按 HTML中的出现顺序层叠。
  - ③ 定位元素
    - 按 HTML中的出现顺序层叠。
  - ④ 定位元素和非定位元素混合时
    - 非定位元素在下层: 非定位元素，始终先于定位元素渲染并出现在定位元素的下层，即便它们在 HTML结构中出现的位置晚于定位元素也是如此。
  - ⑤ order 属性和 flex容器
    - 当order 属性从flex容器中的 “HTML中的外观顺序” 更改呈现时，它同样会影响层叠上下文的顺序。
  - ⑥ 透明度和定位元素的层叠顺序
    - 所有设置了透明度 opacity 小于 1 的定位元素，都会隐式地生成一个层叠上下文（和给元素增加一个 z-index 值的效果相同）。
点击查看: 层叠上下文的详细介绍 | MDN

⑽ 层叠顺序的浏览器支持

示例1: 给定位元素,设置层叠的顺序
html

<!--定位元素-->
<div class="posiancestor">
    <p class="position red fixed">古人学问无遗力，</p>
    <p class="position green relative1">少壮工夫老始成。</p>
    <p class="position red relative2">纸上得来终觉浅，</p>
    <p class="position green absolute">绝知此事要躬行。</p>
</div>

/*设置一个 定位的祖先 浮动元素的包含块*/
.posiancestor {
    position: relative;
    top: 40px;
    left: 40px;
    margin: 10px;
    border: solid 10px;
    padding: 10px;
    width: 50%;
    height: 400px;

}

/*让包含块的高度 自动调整,适用 其中的浮动元素*/
.posiancestor::after {
    /*添加一个空内容*/
    /*content: "";*/
    /*设为 块元素*/
    /*display: block;*/
    /*清除所有浮动*/
    /*clear: both;*/

}

/*第1个元素 设置为 固定定位*/
.fixed {
    /*设置 固定定位*/
    position: fixed;
    top: 50px;
    left: 50px;
    z-index: 2;
    /*border: double 2px;*/
}

/*第2,3个元素，设置为 相对定位*/
.relative1 {
    /*设置 相对定位类型*/
    position: relative;
    /*position: absolute;*/
    /*设置偏移量*/

    top: 50px;
    bottom: 50px;
    /*left: 50px;*/
    /*border: solid 10px;*/
    z-index: 1;
}

.relative2 {
    /*设置 相对定位类型*/
    position: relative;
    /*position: absolute;*/
    /*设置偏移量*/

    top: -10px;
    left:20px;
    z-index: 0;

}
/*第 4 个元素 ，设置为 绝对定位 */
.absolute{
    /*设置 绝对定位类型*/
    position: absolute;
    top: 210px;
    left: 60px;
    z-index:-1;
}

① 定位元素: 默认的层叠顺序 (默认地, 按照在 html 中的标签的先后顺序)
② 定位元素: 改变层叠顺序后

下面示例的代码 css

/*理解 层叠上下文*/

#div2 { z-index: 2; }
#div3 { z-index: 1; }
#div4 { z-index: 10; }

#div1,#div3 {
    border: solid 2px green;
    width: 50%;
    margin: 10px;
    padding: 10px;
    background-color: #e2ffdd;

    position: relative;
    /*设置为 相对定位的元素，不设置下方的 偏移量,也会把元素 认定为 相对定位元素*/
    top: 5px;
}

#div2{
    border: dashed 2px red;
    background-color: #ffdcdd;

    position: absolute;
    top: 50px;
    left: 100px;

}

#div4{
    border: dashed 2px rebeccapurple;
    background-color: #f5d3ff;

    position: absolute;
    top: 10px;
    left: 180px;
}

html

<!--理解 层叠上下文-->

<div id="div1">
    <b>DIV #1</b><br />
    position: relative;
    <!--    新建1个div-->
    <div id="div2"><b>DIV #2</b><br />position: absolute;
        <br />
        z-index: 2;
    </div>
</div>

<div id="div3">
    <b>DIV #3</b><br />
    position: relative;<br />
    z-index: 1;
    <!--    新建一个div-->
    <div id="div4">
        <b>DIV #4</b><br />
        position: absolute;<br />
        z-index: 10;
    </div>
</div>

示例2: 理解层叠上下文的概念。(代码在上方)
- z-index 属性被分配在两个水平的层次结构中。
- ⑴ 同一个层叠上下文
  - DIV #2 (z-index: 2) 在 DIV #3 (z-index: 1)的上面，因为他们都属于同一个层叠上下文（ = 根元素创建的层叠上下文），所以z-index的值决定了元素之间的叠放顺序。
    - ① 静态元素(普通的元素 = 非定位元素) ⇒ 不会创建层叠上下文⇒ 非定位元素一般都以在同一层叠上下文 = 根元素创建的层叠上下文 中。
    - ② 谁能创建层叠上下文: 点击查看: 层叠上下文的详细介绍。
- ⑵ 不属于同一个层叠上下文: z-index 不起排序作用。
  - DIV #2 (z-index: 2) 在 DIV #4 (z-index: 10) 的上面，尽管 DIV #2 的 z-index 值小于 DIV #4。
  - ① 原因在于: 它们不属于同一个层叠上下文。
  - ② DIV #4处于: DIV #3 (相对定位元素) 所创建的层叠上下文中。
    - DIV #2处于: DIV #1 (相对定位元素) 所创建的层叠上下文中。
      - ⇒ ❶ DIV #1，DIV #3 创建的是 兄弟层叠上下文⇒ 不是同一层叠上下文 ⇒ z-index 无效。
      - ❷ 父子元素⇒ 同一层叠上下文: DIV #3 和子元素 div#4 在同一层叠上下文⇒ z-index 有效 ⇒ div#3 在 div#4 的下方。
  - ③ div#1,div#3 设置为相对定位元素
    - ⇒ 会各自创建 新的层叠上下文
    - ⇒ div#3 的后代 div#4 和 div#1的后代 div#2 不在同一个层叠上下文中
    - 不在同一个层叠上下文中 ⇒ z-index 在div#2,div#4 之间无效
- ⑶ 相对定位元素和层叠上下文⇒ 层叠顺序
  - 定位元素 ⇒ 创建新的层叠上下文。
    - 如果 #div1,#div3 不设置为相对定位元素,就不会创建新的层叠上下文，那么这4个 div，都是同一层叠上下文,z-index 对4个div 就都起作用了。
    - z-index值大的，显示在上方。

⑷ 层叠上下文之间的关系
- ① 父子层叠上下文 ⇒ 同一层叠上下文 ⇒z-index有效
  - 层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。
    - 比如包含块是定位元素,会创建一个层叠上下文,子元素也是定位元素，也会创建一个层叠上下文，这时 z-index 对于这样的父子，还是可以进行层叠顺序排序的,即 z-index 有效。
    - 比如 div#3和它的子元素 div#4 都是定位元素，都各自创建新的层叠上下文，div#3(z-index: 1;) 还是处于 div#4( z-index: 10; ) 下方。
- ② 兄弟之间的层叠上下文 ≠同一层叠上下文了 ⇒z-index无效。
  - 每个层叠上下文都完全 独立于它的兄弟元素：当处理层叠时 只考虑子元素。
  - 比如 DIV #2 (z-index: 2) 在 DIV #4 (z-index: 10) 的上面，因为各自的父元素都是定位元素,都创建了一个新的层叠上下文 (两个兄弟级别的层叠上下文)
- ③ 每个层叠上下文都是自包含的：
  - 当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。
⑸ 层叠上下文的层次结构
- 通常HTML的层次结构和层叠上下文的层次结构是不同的。
  - 父子同一层级:
    - 在层叠上下文的层次结构中，没有创建层叠上下文的元素同其父级处于一个层叠上下文。
- 能创建层叠上下文的元素:
  - 有的元素可以创建层叠上下文,比如定位元素，有的元素不能创建层叠上下文, 比如普通的静态元素(position: static)。
更多示例: 分级菜单中的定位和层叠顺序

1.6 clip 属性: 设置绝对/固定定位元素的可见区域 (搭配 position 属性, 可指定四条剪切线的位置 , 已废弃，用 clip-path 替代)

⑴ 剪切绝对/固定定位的元素: clip 属性
- ① 可见区域:
  - clip 属性定义了元素的哪一部分是可见的。
  - 可指定四条剪切线的位置 ⇒ 上下/左右剪切线中间的区域 = 可见区域。
- ② 适用对象:
  - 只适用于 ❶ 绝对定位元素 = position:absolute 的元素和 ❷ 固定定位的元素 position:fixed (固定定位，也算是某种绝对定位)。
- ③ 已废弃
  - 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性，使用 clip-path 属性替代。

⑵ 剪切的语法
- clip: rect(top,right,bottom,left)|auto|inherit;

<shape> | auto
where 
<shape> = rect(<top>, <right>, <bottom>, <left>)

/* 关键字值 Keyword value */
clip: auto;

/* 矩形值，要带单位 可用空格符或逗号 分隔 <shape> values 
空格分隔:  向后兼容的语法*/
clip: rect(1px 10em 3rem 2ch);
clip: rect(1px, 10em, 3rem, 2ch);

/* 全局值 Global values */
clip: inherit;
clip: initial;
clip: unset;

⑶ 剪切的属性值
- ① 不剪切(默认值): auto
  - 浏览器设置元素的形状。
  - ≠ 这与 rect(auto, auto, auto, auto) 不同，rect()会剪切到元素的边框的内边界。
- ② 可见区域 (剪切线的位置): rect()
  - 合法的形状值是：
    - ❶ rect(<top>, <right>, <bottom>, <left>)
    - ❷ rect(<top> <right> <bottom> <left>)
  - <top>, <right>, <bottom>, <left>的取值
    - ❶ 长度值 <length> 或 ❷ auto.。
  - 偏移量 = 剪切线的位置
    - 设置剪切的区域偏移量，和绝对定位的位置偏移量无关，只和元素本身的整体宽高有关。
    - 剪切位置相对于: 相对元素的 左边框和上边框 的距离。
      - <top> 和 <bottom>
        相对于盒子 上边框边界 的偏移量 = 剪切线的位置。
      - <right> 和 <left>
        相对于盒子 左边框边界 的偏移量 = 剪切线的位置。
    - 元素的整体宽高
      - 元素的整体高度 = 上下边框+上下内边距+高度 (外边距透明,此处不含外边距)
      - 元素的整体宽度 = 左右边框+左右内边距+宽度 (外边距透明,此处不含外边距)
    - ❶ 上top = 上方会剪切掉的距离 (从上往下剪切) 。
      - 最大值: 不能超过元素的整个高度,否则会整个剪切掉。
      - 显示上边框 ⇒ 设置 top = 0px
    - ❷ 下bottom= 距离上边框外边界的距离 。
      - 下方被剪切的距离 = 整个元素高度 - bottom的值 (负值表示不剪切)
      - 显示下边框 ⇒ 设置 bottom = 元素的整个高度。
        小于这个值,意味着距离上边框更近, 从下往上剪切一部分。
    - ❸ 左left = 左边会剪切掉的距离 。
      - 最大值: 不能超过元素的整个宽度,否则会整个剪切掉。
      - 显示左边框 ⇒ 设置 left = 0px
    - ❹ 右 right = 距离左边框外边界的距离 。
      - 右方被剪切的距离 = 整个元素宽度 - right的值 (负值表示不剪切)
      - 显示下边框⇒ 设置 right = 元素的整个宽度。

⑷ 剪切区域的浏览器支持

示例1: 定义一个定位元素进行剪切
- 剪切线的位置相对于: 是相对于元素的 左边框和上边框的距离。
- 剪裁区域和内容区: 取决于剪切线的位置。
  - 可能比元素的内容区大
  - 也可能比内容区小。
html

<!--定位元素和剪切区域-->
<div class="posiancestor">
    <p class="position red">古人学问无遗力，</p>
    <p class="position green">少壮工夫老始成。</p>
    <p class="position red">纸上得来终觉浅，</p>
    <p class="position green absolute">绝知此事要躬行。</p>
</div>

.red {
    background-color: indianred;
    /*margin: 10px;*/
    margin: 10px;
    
}

.green {
    background-color: lightseagreen;
    margin: 10px;

}
/*去除各浏览器的 默认内外边距*/
* {
    margin: 0;
    padding: 0;
}
/*元素的包含块*/
.posiancestor {
    position: relative;
    top: 40px;
    left: 40px;
    margin: 10px;
    border: solid 10px;
    padding: 10px;
    width: 50%;
}

.position {
    /* 设置宽高 */
    width: 150px;
    height: 50px;
    text-align: center;
    /*文字垂直居中: line-height = height*/
    line-height: 50px;
    border: solid 10px;
    margin: 5px;
    padding: 5px;
}
.absolute {
    /*设置 绝对定位类型*/
    position: absolute;
    top: 100px;
    left: 360px;
    /*z-index:-1;*/

    /* 设置 剪切线的位置 */
    clip: rect(0px, 180px, 80px, 0px);
    clip: rect(10px, 180px, 80px, 10px);



}

    clip: rect(10px, 180px, 80px, 10px);

⑴ 显示出来的部分= 上下两条剪切线中间的部分和左右两条剪切线中间的部分
- ① 上边的剪切线位置
  - 距离元素的上边框 10px的位置开始剪切 (上边会被剪切10px)。
- ② 右边的剪切线位置
  - 距离元素左边框 180px的位置开始剪切。
  - 180px = 左右边框+左右内边距+宽度 = 10*2 + 5*2 + 150 = 180px
- ③ 下边的剪切线位置
  - 距离元素的上边框 80px的位置开始剪切。
  - 80px = 上下边框+上下内边距+高度 = 10*2 + 5*2 + 50 = 80px
- ④ 左边的剪切线位置
  - 距离元素左边框 10px的位置开始剪切。
⑵ clip: rect(auto, auto, auto, auto); ≠ clip:auto; 因为后者是不剪切,前者是剪切到边框处,虽然看上去差不多。
- 四条剪切线的位置都是 auto = 被剪切到该边的边框 = 边框和以内的内容都可见。

2. float 属性: 设置元素的浮动方向 (不浮动 none/左浮动/右浮动/开始处/结束处)

⑴ 设置元素的浮动方向: float属性
- ① 浮动元素的位置: 容器的左侧/右侧
  - 左右侧: 属性将元素放在其容器的左侧或右侧。
  - 环绕元素: 允许 ❶ 文本和 ❷ 内联元素环绕它。
    - 可用于图像, 使文本围绕在图像周围。
- ② 从文档流中删除:
  - 该元素从网页的正常流动中(文档流) 移除。
  - 保持部分流动性:
    - ❶ 影响非浮动元素的文本位置:
      - 因为浮动元素, 还会影响区域内的非浮动元素的文本的显示( 如,文本环绕)
    - ❷ 浮动元素和非浮动元素的相对位置:
      - 非浮动元素下面的元素(html 中的次序) 进行浮动, 也会参考上方非浮动元素的位置，所以浮动元素,尽管从文档流中删除了, 仍然保持部分的流动性（与绝对定位相比）。
- ③ 适用对象
  - 所有元素
  - 但如果display的值为none = 不可见的元素, 则没有效果。
  - 浮动元素, 其中float的计算值≠none。

⑵ 浮动和块布局
- 浮动 ⇒ 块布局 ⇒ 块级框 ⇒ 修改 display的计算值
  - 浮动 float 意味着使用块布局，它在某些情况下修改display 值的计算值：
  - 浮动 ⇒ 块级框
    - 会生成一个块级框block，不论它本身是何种元素。

指定值 (Specified value)	计算值 (Computed value)
inline	block
inline-block	block
inline-table	table
table-row	block
table-row-group	block
table-column	block
table-column-group	block
table-cell	block
table-caption	block
table-header-group	block
table-footer-group	block
inline-flex	flex
inline-grid	grid
other	unchanged

⑶ 浮动元素的 js 引用: 不同名字
- 如果要在 JavaScript 中把 float 属性当作 HTMLElement.style对象的一个成员来操作，
  - 现代浏览器都支持 float
  - 在Firefox 34 和更老的版本中，必须拼写成 cssFloat。
  - 在 IE 8 和更老的版本当中，要使用 styleFloat 属性。
- 这是 DOM 驼峰命名和 CSS 所用的连字符分隔命名法对应关系中的一个特例
  - 这是因为在 JavaScript 中"float"是一个保留字，
  - 因为同样的原因，"class“被改成了”className" 、"for“被改成了”htmlFor"。

⑷ 浮动的语法
- float: left|right|none|inherit;
  - 包含新属性值: left | right | none | inline-start | inline-end;

/* 关键字值 Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* 全局值 Global values */
float: inherit;
float: initial;
float: unset;

⑸ 浮动的属性值
- 不浮动 none/左浮动/右浮动/开始处/结束处
- ① 不浮动 (默认值): none
  - 元素不能浮动。
- ② 左浮动: left
  - 元素必须浮动在其包含块的左侧。
- ③ 右浮动: right
  - 元素必须浮动在其包含块的右侧。
- ④ 开始处: inline-start
  - 元素必须浮动在其所在块容器的开始一侧。
  - 在文本流向从左到右 ltr的脚本中是左侧，在 rtl 脚本中是右侧。
- ⑤ 结束处: inline-end
  - 元素必须浮动在其所在块容器的结束一侧
  - 在 ltr 脚本中是右侧，在 rtl脚本中是左侧。

⑹ 浮动的浏览器支持
- 新的属性值开始处/结束处支持度还很差,只有火狐浏览器支持。

示例1: 浮动元素的定位
- 移出文档流: 从文档流中删除 (尽管仍然是文档的一部分)。
  - 当一个元素浮动之后，它会被移出正常的文档流。
- 停靠位置: 容器的边框/ 另一个浮动元素
  - 浮动元素向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
css

* {
    margin: 0;
    padding: 0;
}

.position {
    /* 设置宽高 */
    width: 130px;
    height: 100px;
    text-align: center;
    /*文字垂直居中: line-height = height*/
    line-height: 100px;
    /*让块元素 排成一行,默认是从上到下 一列*/
    /*display: inline-block;*/
    border: solid 10px;


}

.red {
    background-color: indianred;
    /*margin: 10px;*/
    margin-top: 10px;
}

.green {
    background-color: lightseagreen;
    margin-top: 10px;

}

/*设置一个 包含块 的样式*/
.posiancestor {

    margin: 10px;
    border: solid 10px;
    padding: 10px;
    width: 50%;
    height: 500px;
}

/*第3个元素,最中间元素的*/
.middlepos{
    border: dotted 2px red;
}

/*浮动元素*/
.floatleft{
    float: left;
}
.floatright{
    float: right;
}

html

<!--浮动元素-->
<div class="posiancestor">
    <p class="position red floatleft">古人学问无遗力，</p>
    <p class="position green floatleft">少壮工夫老始成。</p>
    <p class="middlepos">古人在学习上不遗余力，年轻时下功夫，到老年才有所成就。
        从书本上得来的知识毕竟不够完善，要透彻地认识事物还必须亲自实践。</p>
    <p class="position red floatright">纸上得来终觉浅，</p>
    <p class="position green">绝知此事要躬行。</p>
</div>

⑴ 默认显示

⑵ 浮动前两个元素
- ① 非浮动元素的位置和文本环绕
  - ❶ 非浮动元素的位置
    - 前两个元素左浮动 = 从文档流中删除 = 不占据文档流中的位置 ⇒ 所以第3个元素,占据了最开始的位置
  - ❷ 非浮动元素的文本位置
    - 但第 3个元素的文本,没有直接显示在该位置上 ,而是在考虑到该范围内的浮动元素⇒ 非浮动元素的文本, 在浮动元素的周围环绕。
  - ❸ 第4个元素的位置
    - 排在第3个元素下方,有一部分区域,和浮动元素重叠,也会影响显示。
    - 区域重叠和文本显示:
      - 可以看到第4个元素区域,因为和浮动元素的区域有部分重叠, 文本也不再是居中显示的了。

⑶ 前两个元素左浮动,第3,5个元素不浮动,第4 个元素右浮动
- 浮动元素和不浮动元素的相对位置
  - 不浮动元素,后面的浮动元素, 浮动时的位置,考虑不浮动元素
    - 第 4个元素右浮动,排在第3个不浮动的块元素的下方。
    - 第 5 个元素,不浮动,也按顺序排第3个不浮动的块元素的下方。
⑷ 前两个左浮动,后两个右浮动,中间的不浮动
- 浮动元素和包含块的高度
  - ① 如果包含块没有设置固定值
    - ❶ 高度 = 没有浮动的内容的高度，受浮动元素的影响。
    - ❷ 如果一个元素里只有浮动元素，那包含块的高度会是0。如果你想要它自适应 ,即包含所有浮动元素，需要自清除它的子元素。一种方法叫做clearfix，即 clear一个不浮动的::after伪元素。

/*当包含块的高度, 没有设置固定值时, 让包含块的高度 自动调整,适用 其中的浮动的子元素= 符合 需要的高度*/
.posiancestor::after {
    /*添加一个 空内容*/
    content: "";
    /*设为 块元素*/
    display: block;
    /*清除所有浮动*/
    clear: both;

}

② 设置包含块设置固定高度
- 高度 = 固定值，则包含块的高度不会因为元素浮动而变化。

2.1 clear 属性: 清除前面的浮动元素的浮动 (清除类型 = 前面的浮动元素的类型,搭配 float 属性)

⑴ 清除前面的浮动元素的浮动: clear 属性
- ① 清除对象: 属性设置是否清除 ❶ 前面的 + ❷ 浮动元素的浮动。
- ② 位置下移: 并把设置清除浮动的该元素,位置下移到前方的浮动元素的下方。

⑵ 清除浮动的适用对象: clear 属性适用于 ❶ 浮动元素 和 ❷ 非浮动元素。
- Ⅰ. 用于非浮动元素/非浮动块:
  - ① 位置下移: clear 将非浮动块的 边框的边界 移动到所有相关 浮动元素外边距的边界 的下方。
    - 边框和外边距都有宽度时,要区分区域的内外边界 (清除浮动是针对外边界)。
  - ② 垂直外边距合并: 这个非浮动块的垂直外边距会折叠/合并。
    - 在非浮动元素中清除浮动: 浮动元素的外边距和非浮动元素的外边距会合并( 成一个)。
      - ❶ 浮动元素的外边距
      - ❷ 非浮动元素的外边距
- Ⅱ. 用于浮动元素
  - ① 浮动元素之间: 垂直外边距不合并
    - 两个浮动元素的垂直外边距将不会合并。
      - ❶ 第1个浮动元素的外边距:
      - ❷ 第2个浮动元素的外边距:
  - ② 移动: 用于浮动元素 ⇒ 底部浮动元素移到下方。
    - 它将底部的浮动元素的外边距的边界移动到所有相关的浮动元素的外边距边界的下方。
- ③ 浮动元素的相对位置
  - 这会影响后面的浮动元素的布局，因为会让后面的浮动元素的位置无法高于它之前的元素。
- ④ 前置浮动被清除:
  - ❶ 清除谁的浮动:
    - 在该元素上设置清除浮动,清除的都是该元素 ❶ 前面的 + ❷ 浮动元素 的浮动
    - 被清除的相关浮动，指的是在相同的块级格式化上下文(区域)中的前置/前面的浮动。
    - 这个 “前面” ，指的是元素在 html 中的先后次序,排在前面的元素。
  - ❷ 设置清除浮动的元素的位置: 浮动元素的下方。
    - 在该元素上设置清除浮动，会使该元素下移, 清除浮动的元素 ⇒ 在浮动元素的下方。

上图涉及代码
- 清除左浮动
- 两个左浮动元素,则在第2个浮动元素上,设置清除左浮动
  - 因为第一个元素左边没有左浮动的元素。
  - 对右边的元素清除右浮动也不对,因为右边的元素,是左浮动的元素。
  - 清除浮动,清除的是该元素的前面的浮动元素的浮动。
html

<div class="posiancestor">
    <p class="position red floatleft1">古人学问无遗力，</p>
    <p class="position green floatleft2">少壮工夫老始成。</p>
    <p class="middlepos">古人在学习上不遗余力，年轻时下功夫，到老年才有所成就。
        从书本上得来的知识毕竟不够完善，要透彻地认识事物还必须亲自实践。</p>
    <p class="position red floatright">纸上得来终觉浅，</p>
    <p class="position green">绝知此事要躬行。</p>
</div>


* {
    margin: 0;
    padding: 0;
}

.position {
    /* 设置宽高 */
    width: 130px;
    height: 100px;
    text-align: center;
    /*文字垂直居中: line-height = height*/
    line-height: 100px;
    /*让块元素 排成一行,默认是从上到下 一列*/
    /*display: inline-block;*/
    border: solid 10px;


}

.red {
    background-color: indianred;
    /*margin: 10px;*/
    margin-top: 10px;
}

.green {
    background-color: lightseagreen;
    margin-top: 10px;

}

/*设置一个 包含块 的样式*/
.posiancestor {

    margin: 10px;
    border: solid 10px;
    padding: 10px;
    width: 50%;
    height: 500px;
}
.middlepos{
    border: dotted 2px red;
    /*clear: left;*/
    margin: 10px;
}
/*浮动元素*/
.floatleft1{
    float: left;
}
.floatleft2{
    float: left;
    /*两个左浮动元素,则在第2个元素上,清除左浮动 ,因为第一个元素左边 没有左浮动的元素,对右边的元素 清除右浮动也不对,因为右边的元素,是左浮动的元素,清除 浮动,都是清除 前面浮动元素的浮动*/
    clear: left;
}
.floatright{
    float: right;
}

⑶ 清除浮动的处理方式
- CSS1 和 CSS2 中: 增加上外边距
  - 这是通过自动为清除浮动的元素 (设置了 clear 属性的元素), 增加上外边距 实现的。
- 在 CSS2.1 中: 增加清除空间
  - 会在清除浮动的元素上外边距之上 增加清除空间
  - 而外边距本身并不改变。

⑷ 清除浮动的语法
- clear: none|left|right|both|inherit;
  - 包含新的属性值: none | left | right | both | inline-start | inline-end;

/* 关键字值 Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* 全局值 Global values */
clear: inherit;
clear: initial;
clear: unset;

⑸ 清除浮动的属性值
- clear清除的浮动类型 = 浮动float对应的类型
- ① 允许浮动 (默认值): none
  - 允许浮动元素出现在两侧。
  - 元素不会向下移动以清除元素前面的浮动元素。
- ② 清除左浮动: left
  - 该元素向下移动以清除 ❶ 元素前面的 + ❷ 左浮动元素 float: left 的浮动。
  - 左浮动元素≠ 在左边的浮动元素 (相对位置)
    - 只对左浮动元素有效,不是指左边的浮动元素,指的是清除 float: left 的左浮动元素的浮动影响。
- ③ 清除右浮动: right
  - 该元素向下移动以清除 ❶ 元素前面的 + ❷ 右浮动元素 float: right; 的浮动。
  - 右浮动元素 ≠ 在右边的浮动元素 (相对位置)
- ④ 清除左右浮动: both
  - 该元素向下移动以清除 ❶ 元素前面的 + ❷ 左浮动元素 float: left 的浮动+ ❸ 右浮动元素 float: right; 的浮动。
- ⑤ 清除开始处浮动: inline-start
  - 元素向下移动，以清除开始处浮动元素的浮动。
- ⑥ 清除结束处浮动: inline-end
  - 元素向下移动，以清除结束处处浮动元素的浮动。

⑹ 清除浮动的浏览器支持
- 新属性值 = 开始处/结束处浮动的清除,支持度还很差。

示例1: 让包含块的高度自动调整,适用其中的浮动的子元素
- 浮动元素和包含块的高度
  - ① 如果包含块没有设置固定值
    - ❶ 高度 = 没有浮动的内容的高度，受浮动元素的影响。
    - ❷ 如果一个元素里只有浮动元素，那包含块的高度会是0。如果你想要它自适应 ,即包含所有浮动元素，需要自清除它的子元素。一种方法叫做clearfix，即 clear一个不浮动的::after伪元素。
      - 让浮动元素不会溢出包含块的边框

/*让包含块的高度 自动调整,适用 其中的浮动的子元素*/
.posiancestor::after {
    /*添加 空内容*/
    content: "";
    /*设为 块元素*/
    display: block;
    /*清除所有浮动*/
    clear: both;

}

示例2: 清除元素的浮动,让该元素下移。
html


<!--浮动元素-->
<div class="posiancestor">
    <p class="position red floatleft1">古人学问无遗力，</p>
    <p class="position green floatleft2">少壮工夫老始成。</p>
    <p class="middlepos">古人在学习上不遗余力，年轻时下功夫，到老年才有所成就。
        从书本上得来的知识毕竟不够完善，要透彻地认识事物还必须亲自实践。</p>
    <p class="position red floatright1">纸上得来终觉浅，</p>
    <p class="position green floatright2">绝知此事要躬行。</p>
</div>

.middlepos {
    /*处在中间的 = 第3个元素*/
    border: dotted 2px red;
    margin: 10px;
}

/*浮动元素*/
.floatleft1 {
    float: left;
}

.floatleft2 {
    float: left;
}

.floatright1 {
    float: right;
}

.floatright2 {
    float: right;
}

⑴ 默认显示

/*浮动元素*/

.floatleft1 {
    float: left;
}

.floatleft2 {
    float: left;
    /*两个左浮动元素,则在第2个元素上,清除左浮动 ,因为第一个元素左边 没有左浮动的元素,对右边的元素 清除右浮动也不对,因为右边的元素,是左浮动的元素,清除浮动,清除的是 前面的 浮动元素的浮动*/
    clear: left;
}

⑵ 第 2 个元素,设置清除左浮动 (代码如上)
- 元素下移，清除左边的第1个元素的左浮动元素的浮动
  - 之所以设置在第2个元素上,是因为清除浮动的前置性 = 只清除前面浮动元素的浮动。

.floatright1 {
    float: right;
    /*设置 清除右浮动元素 无效,因为该元素前面 没有右浮动的元素*/
    /*clear: right;*/
    /*设置 清除左浮动有效,因为 该元素前面 有左浮动的元素 */
    clear: left;
}

⑶ 第 4 个右浮动的元素设置清除左浮动
- 因为这个浮动元素,前面有左浮动的元素。

.floatright2 {
    float: right;
    /*可以设置 清除右浮动,因为前面有 右浮动元素*/
    /*clear: right;*/
    /*也可以设置 同时 清除 左右浮动,因为前面 同时 有左浮动元素和右浮动元素*/
    clear: both;
}

⑷ 第 5 个右浮动的元素设置清除右浮动
- 因为这个浮动元素,前面有右浮动的元素。

.middlepos {
    /*中间 第3个元素*/
    border: dotted 2px red;
    margin: 10px;
    /*设置 清除左浮动,因为 前面 有两个左浮动元素*/
    clear: left;
    /*设置 清除右浮动无效,因为元素前面 没有 右浮动的元素*/
    /*clear: right;*/


}

⑸ 第 3 个元素,非浮动元素,设置清除左浮动(代码如上)
- 因为前面两个元素是左浮动元素。

3. display 属性: 设置元素的显示类型 / 框的类型 (元素和子元素的布局)

涉及内容较多,另写了一个博客: 点击查看详情: 【CSS 定位之 display 属性】

♣ 结束语和友情链接

参考文档
- MDN CSS 教程

友情链接

感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
欢迎指正: 如果发现有需要更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
- 可以备注支持的理由或想对作者说的话哦~
赞助二维码:

转载请评论告知作者并注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/103439673
- 版权声明：本文为博主原创文章，转载请评论告知作者并附上博文链接！

在这里插入图片描述

Hey_Coder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS 定位属性（Position）】

CSS 定位属性1. position 属性: 设置元素的位置/定位类型 (静态/ 相对/ 绝对/ 固定/ 粘性, 搭配 top/ right/ bottom/ left 属性)1.1 top 属性: 定位元素的上偏移量 (长度值/百分比值/不偏移 auto, 搭配 position 属性)1.2 bottom 属性: 定位元素的下偏移量 (搭配 position 属性)1.3 left 属性: 设置定位元素的左偏移量 (搭配 position 属性)1.4 right 属性:
复制链接

扫一扫