文章目录1. bfc理解(块级格式化上下文)2.触发bfc方式3. bfc解决的问题)外缘距离整合、浮动高度检测、右侧自适应框创建4. bfc布局规则特性5 .两列阵列特性
将本人久违的云笔记本搬到博客上，统一维护。
1 .了解bfc (块级格式设置上下文() ) ) ) ) ) ) )。
可视为隔离的独立容器，内部元件的布局不影响外部元件。
可以由css属性触发。
浮动元素生成浮动流，块级元素不可见；
生成文本类属性的元素、文本元素和bfc的元素将显示浮动元素。
2 .诱发BFC的方式定位、浮动、Overflow :隐藏、显示为非none的各种。
(1)定位： Absolute或固定；
)2)浮点：左/右；
)3) Overflow :隐藏； 常见而不是可视的方法
)4) display :在线区块； 流动路径、表蜂窝、表复制、flex、在线flex等。
3. BFC解决的问题：配合外侧距离，检测上浮高度，做右侧自适应箱利用bfc避免margin重复。 例如，如果两个div相邻，margin为100px，则实际上下间隙只有100px。
此时，给不同的外面包一层，添加各自的bfc。
4. bfc布局规则特性(1)在bfc中，箱子从顶部开始依次排列。
)2)属于同一bfc的相邻box的margin合并。解决办法上外壳外侧加div设置overflow:hidden； 此时，下面的箱子不属于bfc。
)3)计算bfc的高度时，计算浮动箱的高度。 (情况：未设置父元素高度，子元素浮动)
此时的bfc的作用：消除要素内部的浮动
只需将父元素设置为BFC框，即可清洁子元素的浮动。 最常见的用法是为父元素设置overflow :隐藏样式。 在IE6中添加zoom:1就可以了。
)4) bfc制作右侧适应的箱子。 左侧的div设定溢出： hidden； 可以解决。
场景1，未设定时：
div1为设定宽度高度的浮动(蓝色)，div2为不设定宽度而仅设定高度)宽度自适应)，不设定浮动。
此时，文本元素“看到”浮动元素，即受浮动元素的影响。
图：
div2设置溢出：隐藏；效果相当于浮动并可以宽度自适应如图所示：
5 .用BFC先设置右侧，再设置左侧的两层思想。
(1)首先使第一个元素绝对定位，right:0； 或浮动：光；
)设置第二个，margin-right第一个保证足够的位置即可。
6 .块元素的高度未设置或宽度未设置。 (1)父div的高度未设定时，高度由子元素支撑。 伪代码：
. ff{ margin-top:10px； width: 200px； height: 100px； 后台： # 2f e29 e； border : 1px固态# CCC； }.ss{ width: 50px； border : 1px固态# 000； }div class='ff' div class='ss'ss高度由子元素支撑的/div /div图：
)如果未设置子元素的div宽度，则默认值为父元素宽度的100%，伪代码：
. ff{ margin-top:10px； width: 200px； height: 100px； 后台： # 2f e29 e； border : 1px固态# CCC； } .ss{ height: 50px； border : 1px固态# 000； } div class='ff' div class='ss'ss宽度默认值100%/div /div图：
)3)如果子元素设置为浮动，而没有设置父元素的高度，则父元素的高度为0。 向母要素启动BFC(4个条件)来解决这个问题。
eg:子元素浮动，父元素的高度消失，诱发bfc解决问题
. ff { margin-top: 10px； width: 200px； 后台： # 2f e29 e； border : 5px固态# CCC；/*用BFC解决，任何条件*/overflow :隐藏；/*浮点：左； *//*显示：在线块； *//*位置： absolute； */}.ss {浮动： left； height: 50px； border : 1px固态# 000； }div class='ff '！ -浮动后的宽度由内容支持，而不是父元素的100%，但不超过父元素的宽度-- div class='ss'ss的宽度默认为100%，是否浮动？ 浮动吗？ /div div class='ss'ss2宽度的默认100%是否浮动？ 如果不使用bfc设置/div /div，则父元素的高度为0，没有背景，无法获得效果。 图：
F12检查：解决：
取4条评论的css之一，设置后效果正常。 图：