BFC 结界 之 浅见一二

目录

一:什么是BFC

 二:深入理解BFC

2.1 如何使一个元素变为BFC区域

2.2 解决外边距的塌陷问题(垂直塌陷)

2.3利用BFC解决包含塌陷

2.4 清除浮动

2.5 BFC可以阻止标准流元素被浮动元素覆盖

三:总结


一:什么是BFC

BFC - Block Formatting Context 块级格式化上下文 BFC的定义,在官方文档到中是这么介绍的:一个BFC区域包含创建该上下文元素的所有子元素,但是不包括创建了新的BFC的子元素的内部元素,BFC是一块块独立的渲染区域,可以将BFC看成是元素的一种属性,拥有了这种属性的元素就会使他的子元素与世隔绝,不会影响到外部其他元素

那具体是啥意思呢?

以下实例加深理解

<div style="background-color: #E8E8E8;">

        <i style="background-color: blue;">11111</i>
        <span style="background-color: yellow;">555555555</span>
        <button >右</button>
</div>

此时都是流式排列

当我们在button加入float:right

<div style="background-color: #E8E8E8;>
                    <i style="background-color: blue;">11111</i>
                    <span style="background-color: yellow;">555555555</span>
                    <button style="float: right;">右</button>
                </div>

 

 显而易见 :button按钮 已经脱离文档流 可以理解为 脱离 i和span共同所在空间 处于外部空间之中

但是!!我们想控制button 使他靠右排列 并且不脱离这个(x-index层)空间 我们该怎么办呢?

BFC结界设置 触发BFC结界 控制其中的元素 不脱离(结合上面文档解释理解)

overflow: hidden : 触发BFC结界的一个方法

控制div 中的i span button 内部元素

<div style="background-color: #E8E8E8;overflow: hidden;">
                    <i style="background-color: blue;">11111</i>
                    <span style="background-color: yellow;">555555555</span>
                    <button style="float: right;">右</button>
</div>

 二:深入理解BFC

     每一个BFC区域只包括其子元素,不包括其子元素的子元素。
     每一个BFC区域都是独立隔绝的,互不影响


第一条就是字面意思,第二条直接看代码理解

2.1 如何使一个元素变为BFC区域

body根元素

设置浮动,不包括none

设置定位,absoulte或者fixed

行内块显示模式,inline-block

设置overflow,即hidden,auto,scroll

表格单元格,table-cell

弹性布局,flex

2.2 解决外边距的塌陷问题(垂直塌陷)

开发中,前端的布局手段,离不开外边距margin,那么,也会遇到一些问题,例如外边距的垂直塌陷问题。

加一个<hr>

 ? 两个盒子都有100的外边距,但是实际上两个盒子的距离却只有100px,按理来说应该是200才对,这就是margin垂直塌陷。

那要如何解决这个问题?

1:BFC 只需要给这两个盒子都加一个父元素,并且将这个父元素设置成BFC区域,就可以解决这个margin塌陷的问题。

补充2:分开两个区域 单独设置

<hr>

<table></table>

2.3利用BFC解决包含塌陷

很显然,我们只是想要子元素距离父元素100px,而不是整个父元素都一起跑。这个时候用padding可以解决问题,但是用BFC同样可以解决 

因为将父盒子变成一个独立的区域,这样在BFC区域内部的任何操作,都不会影响到外部

2.4 清除浮动

浮动会导致父元素高度塌陷,那大家还记得怎么清除浮动吗?相信很多人都知道。相信在认识BFC之前大家肯定不太清楚为什么overflow:hidden可以清除浮动。

现在知道了,overflow:hidden创造BFC结界后,BFC区域内的子元素任何边动都是不会影响到外部元素的。所以BFC区域同样可以清除浮动带来的影响。

如图:开头我已经介绍过了 读者读到这里就可以再回到从前回顾一下加深理解

2.5 BFC可以阻止标准流元素被浮动元素覆盖

浮动的元素会脱离文档流,跑到上一个层面,也就是和原本的元素们不在一个层面了。所以可能会导致浮动元素覆盖基本元素的问题。

 那么这个时候我们只需要让红色区域触发BFC,就可以做到不受浮动元素影响

利用这个特性 是否能想到word中的文字环绕功能 ?这里利用到了BFC特性吗 尝试动手一下!

三:总结

最后总结一下:
1:一个BFC区域只包含其子元素,不包括其子元素的子元素。

2:并不是所有的元素都能成为一块BFC区域,只有当这个元素满足条件的时候才会成为一块BFC区域。overflow:hidden。

3:不同的BFC区域之间是相互独立的,互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值