CSS理解:BFC和边距重叠

2018-01-11 12:51:08来源:网络收集作者:咖啡不加糖人点击

分享

阿里云爆款
什么是BFC

BFC (block formatting context) 及块级格式化上下文,从样式上看,具有 BFC 的元素与普通的容器没有什么区别,从功能上看,BFC相当于构建了一个密闭的盒子模型,在BFC中的元素不受外部元素的影响;


个人理解:BFC就是将盒子中子元素的属性锁在父元素中,例如margin,float 使其不影响盒子外的元素。


如何构建BFC

以下情况都会使元素产生BFC
- 根元素或其它包含它的元素 (也就是html元素本身就是BFC)
- float:left ,right
- position:absolute,fixed
- display:inline-block,table-cell,table-caption;(行内块元素与表格元素)
- overflow:hidden,auto,scroll (非 visible属性)
- display: flow-root
- column-span: all


BFC的作用
1. 解决高度塌陷

由于浮动元素脱离了文档流,普通盒子是无法包裹住已经浮动的元素;父级元素的高度为0;




Document

当子元素浮动父级获取不到浮动元素的高度,造成高度塌陷,看下图:
CSS理解:BFC和边距重叠


当父元素转变为BFC时,浮动元素被包裹住




Document

创建BFC后父元素重新获取到浮动元素的高度如下图:
CSS理解:BFC和边距重叠


2.浮动重叠

当一个元素浮动,后面的元素没浮动,那么后面的元素就会与浮动元素发生重叠




Document

后一个元素 与前一个浮动元素发生重叠,只看到了浮动元素:
CSS理解:BFC和边距重叠


根据BFC不与浮动元素重叠的特性,为没有浮动的元素创建BFC环境




Document

元素重新显示:
CSS理解:BFC和边距重叠


3.边距重叠

边距重叠分为两种情况


1.父子重叠


当 父级没有
-垂直方向的border,
-垂直方向 padding,
-父级不是内联元素,
-父级不是BFC,
-父级没有清除浮动,
这五个条件时,子元素的上下边距会和父级发生重叠


Document

CSS理解:BFC和边距重叠


解决方法




Document

上面注释的五种方法都可以实现:
CSS理解:BFC和边距重叠


兄弟重叠

当两个元素的垂直边距相互接触时,两者边距会发生合并,合并的规则为,
- 如果是正数比大小,大的覆盖小的
- 都为负数比绝对值大小,大的覆盖小的
- 正负都有取其差


解决方法


1.将两个元素浮动
2.将两个元素display:inline-block


Document

CSS理解:BFC和边距重叠


其实兄弟重叠完全可以设置一个最大值的边距就可达到想要的效果,完全没有必要去使用上面的两个方法。


参考链接:
https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
https://www.w3cplus.com/css/understanding-css-layout-block-formatting-context.html
https://www.cnblogs.com/HCJJ/p/6263075.html


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台