前端三件套之css(5) BFC-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端三件套之css(5) BFC。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

什么是BFC

能触发BFC的标签或属性

BFC布局的标准规则

什么是BFC

BFC全称(Block formatting context) 意为："块级格式化上下文"。

它就像我们学校分班级一样，虽然都是一个学校，但是每个班是独立的，不相干扰的。

<div class="main">
    <div class="left">这是div1</div>
    <div class="right">这是div2</div>
</div>

例如上述的三个div，"main" 有两个子标签 "left" 和 "right" ，BFC的作用就是分别让这两个子标签形成独立的容器，left 的属性不会应用到 right 中。

1：根元素<html> (相当于最外层的网页界面的子元素自动遵守BFC规则排列）

2：浮动（float : left 及 float : right）

3：绝对定位和固定定位（position: absolute及position: fixed）

4：设置行内块元素和弹性布局（display：inline-block，flex）

5：内容隐藏（overflow：hidden）

仔细观察，它们都有一个共同的特性：脱离文档流。换句话说，能脱离文档流就会触发BFC。

虽然BFC会让容器独立，但是布局的规则还是不变的

1：触发BFC规则的标签，他内部的子标签只能在垂直方向一个一个排列，而不能横着排。

2：内部子标签垂直方向的距离由外边距由margin决定，并且两个相邻子标签外边距会重叠，谁的外边距大，就显示多少

3：计算距离时，会优先考虑top,bottom等定位，再考虑外边距

4：触发BCF的容器不会与其他触发BFC的容器重叠，只会相应的排在后面

5：由于继承关系，子容器的上外边距会传递给父元素，这时让父元素触发BFC形成独立容器，那么子元素将不会将上边距传给父元素

6：触发BFC的元素中，若子容器脱离文档流，那么计算高度时，也会计算子容器高度(该规则的体现见css(3) 浮动之解决父容器高度塌陷方法二)文章来源地址https://www.toymoban.com/news/detail-525778.html

到了这里，关于前端三件套之css(5) BFC的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！