BFC

//css重点内容为布局+盒子模型。

BFC(Block formatting context)块级格式化上下文

1. 产生BFC的条件
display属性为block,list-item,table的元素,会产生BFC

2. 触发条件的几种情况,来产生BFC

-float属性不为none
-position为absolute或fixed

-display为inline-block,table-cell,table-caption,flex,inline-flex

-overflow不为visible

3. BFC元素具有的特性

-盒子垂直排列

-盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
-在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)

1. BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。

2. 计算BFC的高度时,自然也会检测浮动活着定位的盒子高度。
3. 他是一个独立的渲染区域,只有Block-level box参与,他规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

白话文:孩子在家里愿意怎么折腾都行,但是出了家门,你就得乖乖的,不能影响外面的任何人。

4. BFC的主要用途
-清楚元素内部浮动
-解决外边距合并问题

-制作右侧自适应盒子问题

BFC总结
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动,和外边距合并等等,因此,有了这个特性,我们布局就不会出现意外情况了。

扫一扫,支持我一下^_^

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值