Visual LabINTERACTIVE LEARNING
知识库 概念
界面与布局精校教程

CSS 定位、浮动与 BFC

比较常规流、定位流和浮动，并用 BFC 解释清除浮动与外边距折叠。

PositionFloatBFC
入门预计 14 分钟查看源文 ↗

定位

💡 提示

元素脱离标准流布局，定位

相对定位 relative 不脱标

依然占据标准流的位置，可以设置top/bottom/left/right，位置偏移相对于元素原来的位置，亦即参照对象是原来的位置

相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移

百分比是相对于包含块

定位参照：元素原来的位置

应用场景：在不影响其他元素布局的情况下，对当前元素进行位置微调

固定定位 fixed 脱标元素

脱标元素

定位参照：视口 viewport 也就是相对于可视窗口

绝对定位 absolute脱标元素

脱离标准流

定位参照： 最近的定位祖先元素，找不到则是视口 （对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于 ICB（initial containing block，初始包含块））

绝对定位元素（absolute &fixed）特点

  • 可以随意设置宽高（即使行内元素也可以设置宽高）（即行内元素特性消失）

  • 没有设置宽高，则宽高由内容决定，（也就是即使div也不会独占一行） （即块级元素特性消失）

  • 不再向父元素汇报宽高（即不会撑起父元素的高度）

  • 定位参照对象的高度/宽度 = left+right+margin-left +margin-right+绝对定位实际占用的高度/宽度，由此可以延申出3个应用：

    1. left/right/top/bottom都设置为0，且不设置宽高的情况下，绝对定位元素会占据参照容器大小

    2.left-/right都设置为0且不设置宽，则可以占满宽度

    1. left/right/top/bottom都设置为0，且设置宽高的情况下，且margin设置为auto，绝对定位元素会在参照容器中水平垂直居中
粘性定位 脱标元素

相对定位和固定定位的结合体，当滚动到某个阈值时，变成固定定位

定位参照： 相对于最近的滚动的祖先元素

z-index

💡 提示

定位元素的层级！！一定是定位元素

  1. 定位兄弟元素之间比较
  2. 如果z-index相等，则后面的元素在上层
  3. 如果不是兄弟定位元素，则会往上寻找祖先定位元素，去比较，如果祖先定位元素的z-index较小，则当前定位元素z-index再大，也不能覆盖

浮动

💡 提示

认识浮动：元素脱离文档流布局，浮动在其它元素上层

规则

💡 提示

  1. 浮动元素脱离标准流，会相对于包含块浮动，即贴近于包含块边缘（left/right），定位元素会比浮动元素层级高
  2. 浮动元素不能超出包含块
  3. 浮动元素之间不能层叠，如果位置已被占据，则会往后排列，位置不足会换行
  4. 浮动元素不能和行内元素（inline inline-block）层叠，行内元素会被挤出
浮动元素的问题

子元素都浮动的情况下，子元素脱离标准流，不再向父元素汇报高度，会导致父元素的高度会塌陷

解决方案：清除浮动

  • clear： 让元素必须移动到浮动元素的最下面
  • left：元素移动到 float：left的元素下面
  • right：元素移动到 float：right的元素下面
  • both：：元素移动到 浮动的元素下面

使用伪元素可以解决无意义标签使用的问题

clear_fix::after{
  content:"";
  clear:both;
  display:block;
  /*兼容性*/
  visibility:hidden;
  height：0；
}

使用bfc解决：

给父元素触发bfc即可，如设置

.parent {
            background-color: pink;
            overflow: auto;
            /* 加上这个代码，parent盒子触发bfc */
        }
.child {
            background-color: aqua;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            float: left;
        }

BFC

💡 提示

BFC 指的是块级格式化上下文，它是 Web 页面中的一部分，用于限定块级元素的布局。BFC 具有自己的渲染规则，因此它可以避免浮动元素对布局造成的影响，从而实现更加稳定的布局效果。BFC 的形成方式包括浮动元素、绝对定位元素、块级元素设置 overflow 不为 visible 等等。

在 CSS 中，可以通过以下方式创建 BFC：

  • 将元素的 display 属性设置为 inline-block、table-cell、flex、grid 等值，这些布局方式会自动创建 BFC。

  • 使用 float 属性创建浮动元素，浮动元素也会自动创建 BFC。但需要注意，浮动元素的父级容器需要清除浮动才能避免出现高度塌陷的问题。

  • 设置元素的 position 属性值为 absolute 或 fixed 也可以创建 BFC。这些元素会相对于其最近的非静态定位（position 属性不为 static）的祖先元素进行定位，同时也会创建一个新的 BFC。

  • 在元素的 overflow 属性值设置为 hidden、auto 或 scroll 时，也可以创建 BFC。这种方法可以用来包裹浮动元素，从而避免出现高度塌陷的问题。

    总之，只要满足以上条件之一，就可以创建 BFC，从而达到一些特定的布局效果。