标签：str 特性 理解 部分 绝对定位 format 网格元素 i see 解决办法
BFC是什么？
I know it when I see it
所以，虽然我不知道什么是BFC，但是写出样式，我就能知道这是不是BFC
BFC就是这样的东西
接下来，我们继续看官方文档，满足其中之一的都是建立了一个BFC
下列方式会创建块格式化上下文：
table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）column-count 为 1）
读完MDN后，我们知道，满足其一，就是建立了一个BFC
接下来，让我们看几个例子吧，使我们加深对其功能的理解
子元素浮动，脱离了普通文档流，父元素包不住子元素
没有产生BFC
这个时候如果想父元素包裹住子元素，该怎么办呢？
让父元素产生一个BFC
解决办法一：让父元素浮动 浮动产生BFC
解决办法二：让父元素绝对定位
绝对定位产生BFC
解决办法三：让父元素变成行内块元素
display:inline-block产生BFC
解决办法四：让父元素的overflow设置为hidden
overflow:hidden产生BFC
解决办法五：让父元素的display设置为flow-root(触发BFC,无副作用)
display:flow-root产生BFC
注意：如果父元素产生了BFC，会把浮动的子元素包住，但是如果子元素里面还有浮动的子元素(也就是浮动的孙子)，这时，父元素是不会包住孙子元素的
兄弟元素之间，其中左边元素浮动，让其划清界限
没有产生BFC
用 float+div 做左右自适应布局
解决办法一：浮动元素的margin-right没有生效，这个例子中，如果没有BFC，我们想要产生边距，需要将普通元素的margin-left设置为浮动元素宽度+想要产生的边距宽度
没有产生BFC
解决办法二：让右侧兄弟元素的display设置为flow-root
display:flow-root产生BFC
解决办法三：让右侧兄弟的display设置为flex
dispaly:flex产生BFC
解决办法四：让右侧兄弟元素的overflow设置为hidden
overflow:hidden产生BFC
BFC就是页面上一个单独的容器，容器内部的元素不会影响到外面的元素
不明白BFC的概念，但是我们看到后，就知道这是BFC
所以，面试时不要去讲解BFC的定义！
那么，面试时如何说明BFC呢？举例子！！
标签：str 特性 理解 部分 绝对定位 format 网格元素 i see 解决办法
原文地址：https://www.cnblogs.com/sunsunshine/p/14129739.html
