定位与浮动

定位与浮动

1、清除浮动

浮动是什么

浮动float是一种css属性，将元素从正常的文档流取出，并将元素向容器的左侧或者右侧移动，使得其他元素（文本或者内联元素）围绕它排列。浮动元素碰到包含它的边框或者其他浮动元素的边框就会停留。

1、脱离正常文档流，占据一块区域。

2、其他元素产生环绕效果。

为什么要清除浮动

因为浮动元素不参与父容器的高度计算，如果容器只有浮动元素，父容器可能出现高度为0的情况，简称”父容器塌陷“问题。

清除浮动的方法

1、在浮动元素之后插入空的块级元素，添加行内样式，设置clear属性

1
2
<div class="float-box" style="float: left;">浮动元素</div>
<div style="clear: both;"></div>

2、为父容器添加clearfix类，使用伪元素。

1
2
3
4
<div class="clearfix">
  <div class="float-box" style="float: left;">浮动元素</div>
  <!-- 其他内容 -->
</div>
1
2
3
4
5
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

3、为父容器设置 overflow 溢出属性，创建BFC，从而包含内部的浮动元素。

1
2
3
.container {
  overflow: hidden;
}

4、为父容器设置 display，生成BFC，自动包含浮动。

1
2
3
.container {
  display: flow-root;
}

2、对clear属性的理解

clear 属性规定元素的哪一侧不允许出现浮动元素。

1
clear: none|left|right|both|initial|inherit;

clear: both;，这保证了它不会与任何左侧或右侧的浮动元素重叠，而是会显示在这些浮动元素的下方。这样可以有效解决因浮动带来的布局混乱问题。

3、对BFC的理解

BFC（Block Formatting Context，块级格式化上下文） ，它是一种布局的概念，是一个独立的渲染区域，其中的子元素会按照一定的规则排列，且这个区域与外部环境相对独立。

  • 独立的布局区域。当一个元素形成了BFC，它内部的块级盒子（包括浮动元素）会在这个独立的上下文进行布局，不受外部元素的干扰。BFC的区域不会与浮动元素发生重叠。
  • 清除浮动。由于浮动元素不参与正常的文档流，可能导致父容器高度塌陷，通过触发BFC（例如给父容器设置overflow: hidden;），可以让父容器包裹住内部的浮动元素。
  • 需要避免外边距重叠。在同一个BFC内，相邻块级元素的垂直外边距可能会发生折叠。如果希望避免这种情况，将这些元素放入不同的 BFC 中可以解决外边距重叠的问题。
  • 可以用来实现两栏布局。 左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。

？ 如何让一个元素触发BFC

1、设置浮动（且不为none)

2、设置定位（ absolute 或 fixed ）

3、设置溢出（不为 visible，可以是 hidden、auto 或 scroll）

4、设置display（ display: inline-block;、display: flex; 或 display: grid; ）

4、外边距折叠问题

外边距折叠：在css布局中，垂直方向上相邻的块级元素的外边距不会简单相加，而是合并成较大的外边距。父子元素之间也可能存在，当父元素没有边框或内边距时，父元素的上边距和其第一个子元素的上边距也可能发生折叠；同样，父元素的下边距和最后一个子元素的下边距也会折叠。

问题：设计初衷是为了避免页面中出现过大的间距，但可能会导致开发者预期与实际布局不符，从而引发问题。

1
2
<div style="margin-bottom: 20px; background: lightblue;">元素1</div>
<div style="margin-top: 30px; background: lightgreen;">元素2</div>

？ 怎么避免外边距折叠问题

1、为父元素或者相邻元素添加内边距 / 边框。

2、使用BFC，为父元素生成独立的格式化上下文，限制了子元素外边距“溢出”父元素的边界，使得子元素的外边距仅在父元素内部起作用，而不会和父元素的外边距合并到一起。

3、让兄弟元素各自形成 BFC 。

5、元素的层叠顺序

层叠顺序 stacking order：多个重叠元素在视觉上显示的前后顺序，也就是元素的覆盖顺序，是Z轴方向的层叠（垂直于屏幕的方向）。

层叠上下文 stacking context：层叠上下文是一个独立的“堆栈”，在这个上下文内的元素按照特定的规则排列。只有在同一个层叠上下文中的元素，其 z-index 值才会相互比较。

？ 创建层叠上下文的方法

文档中的层叠上下文由满足以下任意一个条件的元素形成：

z-index 属性
z-index 用于调整处于同一层叠上下文中的元素的显示顺序：

  • 较大的 z-index 值会使元素显示在较小 z-index 值的元素之上。
  • z-index 只有在元素创建了定位（例如 position: relative、absolute 或 fixed）或属于特定的层叠上下文时才起作用。
  • 在不同层叠上下文中的元素，彼此的 z-index 值不互相比较。
  • 如果没有特别设置 z-index，元素会按照文档中出现的顺序进行堆叠（后面的覆盖前面的）。

层叠等级：在同一个层叠上下文中，内部的元素在z轴的顺序。任何元素都有层叠等级。html根节点就是一个层叠上下文。

img

对于上图，由上到下分别是：

（1）背景和边框：建立当前层叠上下文元素的背景和边框。

（2）负的z-index：当前层叠上下文中，z-index属性值为负的元素。

（3）块级盒：文档流内非行内级非定位后代元素。

（4）浮动盒：非定位浮动元素。

（5）行内盒：文档流内行内级非定位后代元素。

（6）z-index:0：层叠级数为0的定位元素。

（7）正z-index：z-index属性值为正的定位元素。

6、position的属性有哪些，区别是什么

1
position: static（默认）|absolute|fixed|relative|sticky|initial|inherit;

  • static：默认，静态定位。按照正常的文档流排列，元素不会脱离文档流。设置top,left等无效。

    适用场景：一般用于普通文本、段落和不需要定位的元素。

  • absolute：绝对定位。元素脱离正常文档流，不再占据空间。定位参考最近的定位祖先（不含static)，没有就相对于文档的根元素html定位。

    适用场景：需要精确控制元素位置，或制作悬浮层、弹出层等效果时使用。

  • fixed：固定定位。元素脱离正常文档流，不再占据空间。定位参考浏览器视口，即使页面滚动，元素依然保持在同一位置。

    适用场景：需要元素在页面滚动时保持固定位置时使用，常用于固定导航栏、返回顶部按钮等。

  • relative：相对定位。仍然保持在文档流中，可以通过top、left等属性对元素的原始位置进行视觉上的偏移。

    适用场景：当需要微调元素位置，同时希望元素仍然占据原始空间时使用；也常用于作为绝对定位子元素的定位参考。

  • sticky：粘性定位。在滚动到指定阈值前表现为相对定位，达到阈值后表现为固定定位。需要设置 top、left、bottom 或 right 中的一个（常用 top）。

    适用场景：常用于表头、侧边导航等，需要在页面滚动时保持部分固定的效果，但又需要遵循文档流的元素。

  • initial|inherit：恢复默认值 | 从父元素继承。

7、display、float、position的关系

  • display：决定元素在正常文档流中的排列方式。

    block：生成块级元素，独占一行。

    inline：生成行内元素，不独占一行。

    inline-block：具有行内特性，但同时可以设置宽高。

    flex、grid、table 等：生成相应的布局容器。

    none：不生成任何盒子，不显示。

  • float：让元素向左或向右“浮动”，脱离正常文档流，自动块化，会占据空间，从而使后续的文本或内联元素环绕它排列。

  • position：决定元素在页面上的定位以及在文档流的行为。

    static：默认值，元素按正常文档流排列。

    relative：相对定位，元素在正常流中占位，但可以通过偏移属性（top、right、bottom、left）相对于原位置移动。

    absolute：绝对定位，元素脱离文档流，定位参考最近的定位祖先；如果没有，则相对于文档根元素定位。

    fixed：固定定位，元素相对于视口定位，不随页面滚动变化。

    sticky：粘性定位，结合了 relative 和 fixed 的特点，根据滚动位置在两种状态之间切换。

三者的关系和相互影响

第一优先：display: none，直接决定元素不显示，其它属性不再起作用。

第二优先：position 属性，若设置为 absolute 或 fixed，则忽略 float，且自动调整 display（转换为 block/table 等）。

第三优先：当 position 不是绝对或固定时，检查 float。如果 float 不为 none，则 display 可能需要转换为适合浮动的显示类型，同时 position: relative 的偏移是基于浮动后的位置。

最后：如果既不是绝对定位也没有浮动，再根据元素是否为根元素决定 display 的处理方式。非根元素的 display 属性保持用户指定的值，不会做额外的转换。而根元素在某些情况下会有特殊处理，确保整个页面的布局正常。

8、absolute与fixed共同点与不同点

共同点：

  • 脱离文档流：无论是 position: absolute; 还是 position: fixed;，它们都不会占据正常文档流中的空间，周围元素会按常规流排列，不会受到它们位置的影响。
  • 定位属性：两者都可以使用 top、right、bottom、left 属性来指定元素的位置。
  • 重叠与层叠：由于都脱离了文档流，它们容易与其他元素重叠，并且可以通过 z-index 来控制重叠的顺序。

不同点：

  • 定位参照对象：

    position: absolute; 参照对象是其最近的定位祖先（即具有 position 值为 relative、absolute、fixed 或 sticky 的父元素）。如果没有定位祖先，则参照初始包含块（通常是浏览器的根元素 <html>）；

    position: fixed; 元素始终相对于视口（浏览器窗口）定位，不受任何祖先元素的影响，即使其父元素有定位也不改变这一行为。

  • 滚动行为：

    position: absolute; 由于它相对于其定位祖先定位，当页面滚动时，绝对定位元素会随其包含块一起滚动。

    position: fixed; 固定定位的元素始终固定在视口内，即使页面滚动，它们的位置也不会改变。

  • 应用场景：

    position: absolute; 适用于在某个特定区域内精确定位的情况，如弹出菜单、工具提示等，通常依赖于容器的尺寸或位置。

    position: fixed; 常用于需要在用户滚动页面时保持固定位置的元素，如固定导航栏、侧边栏或返回顶部按钮等。

9、对 sticky 定位的理解

它是一种结合了相对定位和固定定位特性的 CSS 定位方式，它使元素在滚动过程中既能保持在文档流中的相对位置，又能在达到特定阈值后“粘住”视口的某个位置。

触发条件

需要为元素设置一个触发粘性的偏移量（例如 top: 0;），告诉浏览器何时开始固定元素的位置。

粘性定位的效果只在其包含块（通常是父容器）的边界内有效。当父容器滚动出视口时，粘性元素也会随之消失。

10、overflow属性介绍一下

overflow 属性是 CSS 中用于控制当内容超出元素的框（容器）时如何处理的一种属性。

visible（默认值）

  • 效果：
    超出容器边界的内容会继续显示出来，不会被裁剪或隐藏。

hidden

  • 效果：
    超出容器边界的内容会被裁剪（隐藏），不会显示出来。

scroll

  • 效果：
    无论内容是否超出，都始终显示滚动条。即使内容不需要滚动，滚动条依然可见（可能为禁用状态或仅显示占位符）。

auto

  • 效果：
    只有在内容超出容器边界时才显示滚动条；如果内容未超出，则不会显示滚动条。

补充说明

  • overflow-x 和 overflow-y
    overflow 是一个复合属性，也可以分别使用 overflow-x 和 overflow-y 来控制水平方向和垂直方向上的溢出行为。
    例如，可以设置 overflow-x: hidden; 而 overflow-y: auto;，实现水平隐藏、垂直滚动的效果。

  • 创建块级格式化上下文（BFC）
    通过设置 overflow 属性（如 hidden 或 auto），还可以触发元素创建块级格式化上下文（BFC），从而帮助解决一些常见的布局问题，比如清除浮动和防止外边距折叠等。

    清除浮动：生成 BFC 的容器会包含其内部所有的浮动元素，确保父容器的高度能正确地扩展到包含这些浮动子元素。

    防止外边距折叠: 当一个元素创建了 BFC 后，它的外边距不会与 BFC 外部的元素发生折叠。BFC 形成了一个独立的布局区域，使得内部和外部的边距计算互不干扰，从而防止了外边距的折叠。