元素的BFC理解

何为BFC

BFC简单理解就是,一块元素区域被赋予了某些样式特性,就会形成一个独立的区域,在此区域内的元素进行margin,padding等改变内部元素样式的操作,不会影响BFC区域外的其他元素。
我们来看一个例子
在这里插入图片描述
在这里插入图片描述
有两个盒子,大盒子套着小盒子,给小盒子加个上外边距50px,我们期望的是小盒子以大盒子的边缘为基准来下移50px距离,但是事实和我们想的不一样,内外盒子出现了margin重叠的现象,内盒子的margin-top就不是以外盒子为参照物,而是以body为参考物,然后内盒子在外盒子内,因此就带着外盒子也有50px的margin-top。

实现BFC的方式

那么问题来了,我们如何让小盒子以大盒子为参照物,达到我们预期了,我们可以用BFC来解决这个问题,也就是让大盒子形成一个BFC区域,小盒子的行为就会被限定在大盒子内,就没办法以body为参照物了,只能以大盒子为参考。
大盒子形成BFC的效果,达到了我们的预期:
在这里插入图片描述
形成BFC区域的手段如下:

  1. border
    在这里插入图片描述
  2. flow-root
    在这里插入图片描述
  3. overflow: hidden和auto
    在这里插入图片描述
    在这里插入图片描述

其他例子

再来看下一个例子:
在这里插入图片描述
我们期望上下盒子中间的边距有80px,实际只有40px,外边距重叠了。
在这里插入图片描述

再来做个小实验,我们来看看两个盒子的实际大小是多少,目前上下两盒子的实际大小都是100px,现在给上盒子增加10px内边距
在这里插入图片描述
效果如下
在这里插入图片描述
我们发现上盒子的红色背景区域变大了,也就是说上盒子变成120px了。

我们再试着给上盒子增加1px边框:
在这里插入图片描述
效果如下,我们发现上下盒子间距仍然是40px,本以为加border可以向上面的例子一样解决问题,但是事实却不符合期望:
在这里插入图片描述
为什么?
重叠的40px外边距明显不符合我们预期(上盒子的margin-bottom以下盒子为参照物,下盒子的margin-top以上盒子为参照物),所以我们该怎么创造我们想要的事实局面?
我们逐一方法尝试:
1.display: flow-root;这种方式只是给自己的元素创造BFC区域,但是两盒子的外边距不在BFC区域内,因此两盒子的参照物都是对方。
在这里插入图片描述
结果仍然不变:
在这里插入图片描述
2. overflow: auto;或者overflow: hidden;这种方式只是给自己的元素创造BFC区域,但是两盒子的外边距不在BFC区域内,因此两盒子的参照物都是对方。
在这里插入图片描述
结果依然不变:
在这里插入图片描述
3. 给下盒子套个盒子,并让它形成BFC区域,这样下盒子的外边距40px就是以套盒子的边缘为参照物,而上盒子以套盒子的边缘为参照物。
在这里插入图片描述
在这里插入图片描述
实际结果如预期:
在这里插入图片描述
因此第3种方法解决了我们例子的问题!

补充知识

一、
在id=app的最外层盒子下,清除了内外边距,浏览器展示的效果,外层盒子和屏幕依然会有边距。
在这里插入图片描述

这代表了body元素依然有边距,我们点击body元素,可以看到外层盒子有个8px外边距,或者说body有个8px的内边距。

二、
单个元素的结构,不外乎由以下几种部门组成,无有例外:1.盒子自身以外的部门:margin 2.盒子自身的组成部门:border, padding , width和height
在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值