【CSS】讲一讲BFC、IFC、GFC、FFC

这篇具有很好参考价值的文章主要介绍了【CSS】讲一讲BFC、IFC、GFC、FFC。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 前言

        FC(Formatting Contexts),是CSS2.1的一个概念,是页面中的一块渲染区域,具有一套渲染规则,决定FC中子元素如何定位,以及和其他元素的关系和相互作用。在说FC之前说一下文档流。

1.1. 普通流

        元素按照其所有HTML中的位置先后位置至上而下布局,行内元素水平排列,直到当前行被占满然后换行,块级元素则会被渲染为新的完整的一行,元素默认都是普通流定位。

1.2 浮动

        当一个元素被设置浮动效果后,它会脱离普通流,向左右向右偏移所在容器的边框位置,或碰到另一个浮动元素为止。

1.3 绝对定位

        元素会整体脱离普通流,因此绝对定位不会对其兄弟元素造成影响。

2. BFC

        BFC(Block Formatting Contexts,块级格式化上下文)是页面上一个隔离渲染区域,BFC中的子元素不会在布局上影响外面的元素。

BFC形成条件:

  • 根元素,即html元素
  • 显示元素,display:inline-block、table-cell、table-caption三种
  • 定位元素,position除relative、static、sticky值以外的值:absolute、fixed两种
  • 浮动元素,float除none值以外的值:left、right
  • 溢出元素,overflow除visible值以外的值:hidden、scroll、auto

特性:

  • 内部Box(块级元素)垂直方向一个接一个放置(BFC中的子元素之间)
  • 垂直方向上的距离由margin决定(BFC中的子元素之间)
  • BFC区域不会与浮动元素区域重叠(BFC和浮动元素同级之间)
  • 计算BFC高度时,浮动元素也参与计算(BFC和浮动元素父子之间)
  • BFC是页面上一个独立容器,窗口中的子元素不影响外面元素(BFC和其他元素同级之间)
2.1 内部盒子垂直方向一个接一个放置

        不在BFC里,块级Box也会垂直排列,这一条规则不用多说

2.2 垂直方向上的距离由margin决定

        块级元素垂直外边距会折叠,即由外边距较大的为准,不会发生margin穿透问题。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box:first-child {
            height: 20px;
            margin: 10px 0;
            background-color: green;
        }
        .box:last-child {
            height: 20px;
            margin: 20px 0;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>
2.3 BFC区域不会与浮动元素区域重叠

        float元素固定宽度,BFC元素不设置宽度,BFC元素宽度会自适应

<!DOCTYPE html>
<html>
<head>
    <style>
        .box:nth-child(1) {
            float: left; /*既是浮动元素,也是BFC*/
            width: 200px;
            height: 300px;
            margin-right: 10px;
            background-color: red;
        }

        .box:nth-child(2) {
            overflow: hidden; /*设置BFC,不被浮动元素覆盖*/
            height: 300px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>
2.4 计算BFC高度时,浮动元素也参与计算
<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            background-color: red;
            padding: 5px;
            overflow: hidden;
        }
        .box {
            float: left;
            height: 20px;
            width: 20px;
            margin: 20px 0;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>
2.5 BFC是页面上一个独立容器,窗口中的子元素不影响外面元素
<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            float: left;
            width: 100px;
            height: 150px;
            background-color: red;
        }
        .wrapper {
            overflow: hidden;
        }
        .box:first-child {
            height: 20px;
            margin: 10px 0;
            background-color: green;
        }
        .box:last-child {
            height: 20px;
            margin: 20px 0;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <div class="box"></div>
        </div>
        <div class="box"></div>
    </div>
</body>
</html>
3. IFC

        IFC(Inline Formatting Contexts,内联格式化上下文) 。

作用:

  • 水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中
  • 垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中
4. GFC

        GFC(GridLayout Formatting Contexts,网格布局格式化上下文)

形成条件:

  • 显示元素,display:grid、inline-grid两种

参见【CSS】布局方式梳理和总结-CSDN博客中的CSS3网格布局。

5. FFC

        FFC(Flex Formatting Contexts,布局格式化上下文)

形成条件:

  • 显示元素,display:flex、inline-flex两种

参见【CSS】布局方式梳理和总结-CSDN博客中的 CSS3 Flex布局。

参见:

区块格式化上下文 - Web 开发者指南 | MDN (mozilla.org)

CSS深入理解流体特性和BFC特性下多栏自适应布局 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)

注:以上,如有不合理之处,还请帮忙指出,大家一起交流学习~  文章来源地址https://www.toymoban.com/news/detail-784273.html

到了这里,关于【CSS】讲一讲BFC、IFC、GFC、FFC的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [前端开发] 常见的 HTML CSS JavaScript 事件

    代码示例指路 常见的 HTML、CSS、JavaScript 事件代码示例 在 Web 开发中,事件是用户与网页交互的重要方式之一。通过事件,用户可以与页面元素进行交互,触发相应的功能或效果。本文将介绍常见的 HTML、CSS、JavaScript 事件,以及事件对象和事件代理的概念。 鼠标事件 鼠标事

    2024年02月19日
    浏览(54)
  • 30个HTML+CSS前端开发案例(完结篇)

    相关代码及其图片素材,持续更新中。。。

    2024年02月09日
    浏览(49)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(52)
  • [HTML]Web前端开发技术7(HTML5、CSS3、JavaScript )CSS的定位机制——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS的定位机制 文档流定位 元素类型   浮动定位 float的用处 float的特点 clear属性 层定位 position属性

    2024年02月05日
    浏览(69)
  • HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解

    排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍: 标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。 将给定的HTML代码转换为Markdown格式的标题标签如下所示: 效果演示: H3:

    2024年02月07日
    浏览(65)
  • [HTML]Web前端开发技术9(HTML5、CSS3、JavaScript )——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS颜色与背景 颜色color属性 背景background属性 1. 背景颜色background-color 2. 背景图像background-image 3. 背景

    2024年02月03日
    浏览(73)
  • [HTML]Web前端开发技术12(HTML5、CSS3、JavaScript )——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 网页标题:三列自适应宽度 网页标题:多行三列自适应宽度 一级水平导航菜单:采用“无序列表+超

    2024年01月16日
    浏览(73)
  • [HTML]Web前端开发技术5.2(HTML5、CSS3、JavaScript )CSS基础,decoration,selector,properties,Cascading——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS基础 CSS继承与层叠 使用CSS控制Web页面 CSS选择器类型 CSS选择器声明 课后练习 应用CSS链接外部样式

    2024年02月05日
    浏览(68)
  • [HTML]Web前端开发技术8(HTML5、CSS3、JavaScript )CSS样式属性,withborder,italic | oblique,indent,padding,——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS属性值中的单位 CSS字体样式 font-size设置字号 字体样式font-style属性 字体系列font-family属性 字体变体

    2024年02月04日
    浏览(69)
  • python_web1(前端开发之HTML、CSS、Bootstap、Javascript、JQuery)

    知识总结: Python_web前端开发 python 安装Flask web框架 pip install flask 简介:templates用来返回html的页面,而非文本。 创建文件index.html 结构如下 index.xml内容如下: web1.py内容如下: 重新运行后: 固定格式:h/div/span/a/img/ul/li/table/input/form 通用的字符编码 meta charset=“UTF-8” div:一个

    2024年04月14日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包