CSS-全面理解BFC

最新推荐文章于 2023-12-21 00:00:00 发布

weixin_46245467

最新推荐文章于 2023-12-21 00:00:00 发布

阅读量71

点赞数

分类专栏：前端开发文章标签： css css3

本文链接：https://blog.csdn.net/weixin_46245467/article/details/113877194

版权

本文详细介绍了BFC（Block Formatting Context）的概念，包括其定义、触发条件、应用场景，如避免外边距重叠、清除浮动和防止元素被浮动元素覆盖。同时，还提及了与BFC相关的其他格式化上下文（FC）类型，如IFC、GFC和FFC。

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

全面理解BFC

1. 常见的定位方案

普通流

-  元素按照它在HTML中的先后位置自上而下布局
-  行内元素水平排列，直到当行被渲染完成后换行，块级元素自己独占一行
-  所有的元素默认都是普通流定位的

浮动

-  元素首先按照普通流位置出现，然后尽可能的向左或者向右偏移

绝对定位

- 元素整体脱离普通流，绝对定位元素不会对兄弟元素造成影响

2. BFC定义

BFC(Block formatting context) 块级格式化上下文，独立的渲染区域有着自己的渲染规则，与这个区域外部毫不相干；简单来说BFC可以看做元素的属性，拥有BFC属性的元素形成自己的渲染区域，不会影响外面的元素

3.如何如触发BFC

根元素（）
浮动元素（float不是none）
绝对定位元素（position是absolute或者fixed）
display具有以下属性（inline-block/table-cell/table-caption/table/table-row/table-row-group/table-header-group/table-footer/inline-table/flow-root/flex/inline-flex/grid/inline-grid）
overflow不是visible的块级元素
contain为layout/content/paint的元素
多列容器【元素的column-count/column-width不为auto（包含column-count为1）】

4.BFC特性应用场景

避免外边距重叠（块级元素margin重叠取大）

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  .box{
    
    width: 400px;
    height: 200px;