BFC与自适应浅析

makeFoxPlay 发布于2019-08-29 11:24 / 1795人阅读

摘要：最常见的有简称和简称。的区域不会与重叠。也就是说只要父容器形成就可以，触发方式见上清除浮动比较好的方法以上用，用更好的方法自适应布局触发自适应属性对比参考资料张鑫旭老师的博客

本文是从之前的csdn上的乱七八糟的笔记整理过来的

概念

　　Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。BFC，块级格式化上下文，是一个独立的渲染区域，只有block-level-box级别参与，规定了内部如何布局并且和外部毫不相干

布局规则

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算

如何触发BFC

根元素

float属性不为none

position为absolute或fixed

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

overflow不为visible

用途

清除浮动
原理：BFC可以包含浮动
我们可以利用BFC的这个特性来“清浮动”，这里其实说清浮动已经不再合适，应该说包含浮动。
也就是说只要父容器形成BFC就可以，触发BFC方式见上
清除浮动比较好的方法：

ie8以上用clearfix：after

ie6，7用clearfix{*zoom:1;}

更好的方法：
.clearfix:after{content:"";display:table;clear:both;}

自适应布局




    
    Document

触发BFC自适应属性对比

参考资料

张鑫旭老师的博客

云服务器 GPU云服务器 bfc bfc布局源码浅析 cdn浅析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111630.html

侧边栏的固定与自适应原来是这样实现的（持续更新）

摘要：规范文档，行内非替换元素背景高度由字体和字体大小决定的，默认处理和行高没关系，不过这只是浏览器现在的处理方法摘自参考。不过实际上这个对样式的影响不是很大或者设置。的值除了也是可以为数值的。的区域不会与重叠。摘要刚看了一个关于前端面试题的帖子，有些css题虽然能答出来，但出于学习的目的与好奇心，觉得有必要加深一下对功能实现原理的了解。整理出一份文档，共勉。正文行内元素的高 ...

sarva 2019-08-30 14:06 评论0 收藏0
侧边栏的固定与自适应原来是这样实现的（持续更新）

摘要：规范文档，行内非替换元素背景高度由字体和字体大小决定的，默认处理和行高没关系，不过这只是浏览器现在的处理方法摘自参考。不过实际上这个对样式的影响不是很大或者设置。的值除了也是可以为数值的。的区域不会与重叠。摘要刚看了一个关于前端面试题的帖子，有些css题虽然能答出来，但出于学习的目的与好奇心，觉得有必要加深一下对功能实现原理的了解。整理出一份文档，共勉。正文行内元素的高 ...

张金宝 2019-08-01 18:39 评论0 收藏0
深入理解css之BFC

摘要：属性，会破坏文档流，与非定位元素很难结合起来用，因此也不适合自适应布局。，其对无感，无法自适应剩余浏览器空间。总结的定义，就如同结界一样，完全封闭对外无任何影响。引起的各种属性与自适应布局自适应布局与属性说明 BFC的定义 BFC的全称是block formatting context（块状格式化上下文），当BFC起作用的时候，其元素内部无论怎么翻江倒海都不会影响到外部元素，同样，外部...

姘搁『 2019-08-30 15:54 评论0 收藏0
浅析BFC布局的概念以及作用

摘要：的概念以及作用的概念以及作用的定义的定义直译为块级格式化上下文。是的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。BFC的概念以及作用 BFC的定义： (Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域，只有Block-level box参与，它规定了内...

荆兆峰 2019-04-23 13:29 评论0 收藏0
浅析BFC

摘要：原文链接说起其实有点像闭包在大多数人印象中的感觉，平时都用过，但在不了解定义的情况下大多数人却又不知道这就是。这种行为只存在于兄弟元素在同一下这种情形。上文提到的可以看下大漠的这篇文章参考理解布局和分钟理解原理原文链接: Fyerls Blog 说起 BFC 其实有点像闭包在大多数人印象中的感觉，平时都用过，但在不了解定义的情况下大多数人却又不知道这就是 BFC。之所以会想了解下什么...

voyagelab 2019-08-29 15:06 评论0 收藏0