BFC 及其应用

BFC是CSS中的一个渲染模式,创建独立的布局区域,防止外部元素干扰。关键规则包括内部元素垂直放置、margin重叠等。创建BFC的方法包括浮动、绝对定位、overflow隐藏等,常用于清除浮动、避免元素覆盖和外边距重叠问题。
摘要由CSDN通过智能技术生成

BFC的概念

BFC 是 Block Formatting Context 的缩写,即块级格式化上下文。
盒模型中的一种 CSS 渲染模式,相当于一个独立的容器,一个独立的渲染区域,规定了内部box如何布局, 里面的元素和外部的元素相互不影响,其中比较重要的布局规则有内部 box 垂直放置,计算 BFC 的高度的时候,浮动元素也参与计算。

BFC的原理布局规则

内部的Box会在垂直方向,一个接一个地放置;
Box垂直方向的距离由margin决定;
属于同一个BFC的两个相邻Box的margin会发生重叠;
每个元素的margin box的左边 与包含块border box的左边相接触(对于从左往右的格式化,否则相反
BFC的区域不会与float box重叠
BFC是一个独立容器,容器里面的子元素不会影响到外面的元素
计算BFC的高度时,浮动元素也参与计算高度
元素的类型和display属性,决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。

创建 BFC 的方式有:

  • html 根元素
  • float 浮动, 值不为none
  • 绝对定位
  • overflow 不为 visible
  • display 为表格布局或者弹性布局(inline-block、table-cell、table-caption);

BFC 使用场景

  • 清除浮动(让父元素的高度包含子浮动元素)
  • 避免某元素被浮动元素覆盖
  • 避免多列布局由于宽度计算四舍五入而自动换行
  • 防止同一 BFC 容器中的相邻元素间的外边距重叠问题

[面试题] 通过以下哪些方法,可以使一个div内形成BFC(块级格式化上下文)(ABC)

A、float: left
B、overflow: hidden
C、position:absolute
D、以上都不能

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值