BFC(边距重叠解决方案)

BFC基本概念

BFC: 块级格式化上下文
BFC基本概念:BFC是CSS布局的一个概念,是一块独立的渲染区域,里面元素的布局不会影响到外部元素
父子元素和兄弟元素边距重叠,重叠原则取最大值。空元素的边距重叠是取margin与 padding 的最大值。

5.2 BFC原理(渲染规则|布局规则):

(1)内部的Box会在垂直方向,从顶部开始一个接着一个地放置;
(2)Box垂直方向的距离由margin(外边距)决定,属于同一个BFC的两个相邻Box的margin会发生重叠;
(3)每个元素的margin Box的左边, 与包含块border Box的左边相接触,(对于从左到右的格式化,否则相反)。即使存在浮动也是如此;
(4)BFC 在页面上是一个隔离的独立容器,外面的元素不会影响里面的元素,反之亦然。文字环绕效果,设置float;
(5)BFC 的区域不会与float Box重叠(清浮动);
(6)计算BFC的高度时,浮动元素也参与计算。

5.3 CSS在什么情况下会创建出BFC(即脱离文档流)

0、根元素,即 HTML 元素(最大的一个BFC)
1、浮动(float 的值不为 none)
2、绝对定位元素(position 的值为 absolute 或 fixed)
3、行内块(display 为 inline-block)
4、表格单元(display 为 table、table-cell、table-caption、inline-block 等 HTML 表格相关的属性)
5、弹性盒(display 为 flex 或 inline-flex)
6、默认值。内容不会被修剪,会呈现在元素框之外(overflow 不为 visible)

5.4 BFC作用(使用场景)

1、自适应两(三)栏布局(避免多列布局由于宽度计算四舍五入而自动换行)
2、避免元素被浮动元素覆盖
3、可以让父元素的高度包含子浮动元素,清除内部浮动(原理:触发父div的BFC属性,使下面的子div都处在父div的同一个BFC区域之内)
4、去除边距重叠现象,分属于不同的BFC时,可以阻止margin重叠

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大鸡腿最好吃

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值