首页 > 其他 > 详细

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

时间:2020-08-16 09:19:59      阅读:53      评论:0      收藏:0      [点我收藏+]

BFC

块级格式化上下文

独立的渲染区域,需要一定规则触发

是什么

技术分享图片

触发条件

技术分享图片

特性

技术分享图片

特性利用

1. margin的重叠问题

上下两个盒子同时给margiin的时候,会发生重叠,重叠的时候取margin最大值

解决办法

  • 给其中一个子元素添加一个父盒子,添加 overflow:hidden/scroll/auto; display:inline-block;float-left/right;等等 让他俩触发BFC

2. BFC的区域不与float浮动的盒子重叠,BFC特性实现两栏布局

给左边固定宽 添加浮动,给右边添加overflow:hidden,会实现两栏自适应

3. 解决margin-top高度塌陷问题

overflow:hidden

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

原文:https://www.cnblogs.com/hsbolg/p/13510996.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!