BFC概念、触发条件、布局规则以及定位、宽高自适应简述

最新推荐文章于 2024-01-12 11:12:00 发布

swlsqf

最新推荐文章于 2024-01-12 11:12:00 发布

阅读量677

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/swlsqf/article/details/104595754

版权

本文介绍了BFC（Block Formatting Context）的概念，包括Box的类型和Formatting Context的定义。详细阐述了BFC的布局规则，如内部Box的垂直放置、margin重叠等，并列举了触发BFC的条件。BFC的应用包括自适应两栏布局、清除内部浮动以及防止margin重叠。此外，还讨论了CSS定位属性如relative、absolute、fixed的用法和区别，以及宽高自适应的实现方法，如相对窗口和父元素的自适应写法。

摘要由CSDN通过智能技术生成

BFC

BFC概念： 在这里插入图片描述
解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。
**Box：CSS 布局的基本单位，直观来说，一个页面就是由若干盒子组成。display 属性，决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
1、block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
2、inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
3、run-in box: 存在于css3 中。
Formatting Context：W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。<