精华内容
下载资源
问答
  • 块级格式化上下文

    2019-10-15 15:20:04
    css进阶块级格式化上下文块级格式化上下文定义,特征及构建
  • BFC块级格式化上下文

    2020-03-09 11:12:47
    (Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。那么,如何来创建块级格式化上...

    (Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。那么,如何来创建块级格式化上下文以及格式化上下文的作用是什么?接下来的这篇文章给大家分享一下关于块级格式化上下文的内容。

     

    我们常说的文档流其实分为==定位流、浮动流和普通流==三种。而普通流其实就是指BFC中的FC。
    FC是formatting context的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。

    通俗一点的方式解释:

    BFC 可以简单的理解为某个元素的一个 CSS 属性,只不过这个属性不能被开发者显式的修改,拥有这个属性的元素对内部元素和外部元素会表现出一些特性,这就是BFC。

    BFC的触发条件即创建块级格式化上下文的的条件:

    ==满足下列条件之一就可触发BFC==

    【1】根元素,即HTML元素

    【2】float的值不为none

    【3】overflow的值不为visible

    【4】display的值为inline-block、table-cell、table-caption

    【5】position的值为absolute或fixed

    创建格式化上下文(BFC)的规则:

    1.内部的Box会在垂直方向,一个接一个地放置。

    2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

    3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

    4.BFC的区域不会与float box重叠。

    5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

    6.计算BFC的高度时,浮动元素也参与计算

    BFC布局规则1:内部的Box会在垂直方向,一个接一个地放置。

    我们平常说的盒子是由margin、border、padding、content组成的,实际上每种类型的四条边定义了一个盒子,分别是分别是content box、padding box、border box、margin box,这四种类型的盒子一直存在,即使他们的值为0.决定块盒在包含块中与相邻块盒的垂直间距的便是margin-box。

    BFC布局规则2:Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

    决定块盒在包含块中与相邻块盒的垂直间距的便是margin-box

    BFC布局规则3:每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

    
     

    什么是块级格式化上下文?创建块级格式化上下文的作用(附代码)代码块

    1. <div class="parent">
    2. <div class="child"></div> //给这两个子div加浮动,浮动的结果,如果没有清除浮动的话,父div不会将下面两个div包裹,但还是在父div的范围之内。
    3. <div class="child"></div>
    4. </div>

    解析:给这两个子p加浮动,浮动的结果,如果没有清除浮动的话,父p不会将下面两个p包裹,但还是在父p的范围之内,左浮是子p的左边接触父p的borderbox的左边,右浮是子p接触父p的borderbox右边,除非设置margin来撑开距离,否则一直是这个规则。

    BFC布局规则4:BFC的区域不会与float box重叠:

    
     

    什么是块级格式化上下文?创建块级格式化上下文的作用(附代码)代码块

    1. <div class="aside"></div><div class="text">
    2. <div class="main"></div></div><!--下面是css代码-->
    3. .aside {
    4. width: 100px;
    5. height: 150px;
    6. float: left;
    7. background: #f66;
    8. }
    9. .main {
    10. height: 200px;
    11. overflow: hidden;//触发main盒子的BFC
    12. background: #fcc;
    13. }
    14. .text{
    15. width: 500px;
    16. }

    上面aside盒子有一个浮动属性,覆盖了main盒子的内容,main盒子没有清除aside盒子的浮动。只做了一个动作,就是触发自身的BFC,然后就不再被aside盒子覆盖了。所以:BFC的区域不会与float box重叠。

    BFC有哪些作用:

    1.自适应两栏布局

    2.可以阻止元素被浮动元素覆盖

    3.可以包含浮动元素——清除内部浮动

    4.分属于不同的BFC时可以阻止margin重叠

    BFC作用1:自适应两栏布局

    还是上面的代码,此时BFC的区域不会与float box重叠,因此会根据包含块(父p)的宽度,和aside的宽度,自适应宽度。

    BFC 与 Layout

    IE 作为浏览器中的奇葩,当然不可能按部就班的支持 BFC 标准,于是乎 IE 中有了 Layout 这个东西。Layout 和 BFC 基本是等价的,为了处理 IE 的兼容性,在需要触发 BFC 时,我们除了需要用触发条件中的 CSS 属性来触发 BFC,还需要针对 IE 浏览器使用 zoom: 1 来触发 IE 浏览器的 Layout。

    
     

    什么是块级格式化上下文?创建块级格式化上下文的作用(附代码)代码块

    1. .parent {
    2. margin-top: 3rem;
    3. border: 5px solid #fcc;
    4. width: 300px;
    5. }
    6. .child {
    7. border: 5px solid #f66;
    8. width:100px;
    9. height: 100px;
    10. float: left;
    11. }

    BFC作用3:可以包含浮动元素——清除内部浮动

    给父pparent加上 overflow: hidden;
    清除浮动原理:触发父p的BFC属性,使下面的子p都处在父p的同一个BFC区域之内,此时已成功清除浮动.
    还可以向同一个方向浮动来达到清除浮动的目的,清除浮动的原理是两个p都位于同一个浮动的BFC区域之中

    BFC的作用4:阻止margin重叠:

    当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠
    操作方法:给其中一个p外面包一个p,然后通过触发外面这个p的BFC,就可以阻止这两个p的margin重叠

    
     

    什么是块级格式化上下文?创建块级格式化上下文的作用(附代码)代码块

    1. <div class="aside"></div><div class="text">
    2. <div class="main"></div></div><!--下面是css代码-->
    3. .aside {
    4. margin-bottom: 100px;//margin属性
    5. width: 100px;
    6. height: 150px;
    7. background: #f66;
    8. }
    9. .main {
    10. margin-top: 100px;//margin属性
    11. height: 200px;
    12. background: #fcc;
    13. }
    14. .text{
    15. /*盒子main的外面包一个div,通过改变此div的属性使两个盒子分属于两个不同的BFC,以此来阻止margin重叠*/
    16. overflow: hidden;//此时已经触发了BFC属性。
    17. }

     

    展开全文
  • css块级格式化上下文

    2020-03-25 08:47:13
    块级格式化上下文(Block Formatting Context,简称BFC) 块级格式化上下文说明 定义:一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局 不同的BFC区域,它们进行渲染时互不感染 创建BFC的元素,隔绝...

    块级格式化上下文(Block Formatting Context,简称BFC)

    块级格式化上下文说明

    • 定义:一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局

    • 不同的BFC区域,它们进行渲染时互不感染

    • 创建BFC的元素,隔绝了它内部和外部的联系,内部的渲染不会影响到外部

    块级格式化上下文具体规则

    • 创建BCF的元素,它的自动高度需要计算浮动元素
      – 原因: 为了隔绝内部和外部的联系,如果高度坍塌,浮动元素会跑到外面去
     .container{
          background: lightbule;
          position:absolute/fixed 
          float:left/right 
         overflow:scroll/auto/hidden;(副作用最小)
        }
    
    • 创建BFC的元素,它的边框不会与浮动元素重叠
      – 原因: 为了隔绝内部和外部的联系,不浮动的元素会避开浮动的元素(通过margin值实现),但还是排列在一行
       .container{
            background: lightbule;
            position:absolute/fixed
            float:left/right 
            overflow:scroll/auto/hidden;(副作用最小) 
          }
    
    • 创建BFC的元素,不会和它的子元素进行外边距合并
      .原因: 为了隔绝内部和外部的联系,container的BFC属于HTML,child的BFC属于container
        .container{
             background:#008c8c;
             height:500px;
             margin-top:30px;
             position:absolute/fixed
             float:left/right
             overflow:scroll/auto/hidden;(副作用最小)
           }
    
       .child{
            height:100px;
            margin: 50px;
            background: lightbule;
          }
    
    • 对比常规流块盒

         * 在水平方向上,必须撑满包含块
         * 在包含块的垂直方向独占一行依次摆放
         * 外边距无缝隙相邻(包括padding border),则进行外边距合并
         * 自动高度和摆放位置,无视浮动元素,绝对,固定定位元素
      

    BFC渲染区域

    这个区域由某个HTML元素创建,以下元素会在其内部创建BFC区域:

         * 根元素: 意味着,<html>元素创建的BCF区域,覆盖了网页中所有的元素
         * 浮动元素和绝对,固定定位元素
         * overflow 不等于 visible的块盒(overflow:hidden)
    
    展开全文
  • BFC(Block Formatting Contexts),块级格式化上下文。 IFC (Inline Formatting Contexts),行内格式化上下文。 1、BFC 规则 属于同一个BFC的两个相邻Box垂直排列 属于同一个BFC的两个相邻Box的margin会发生...

    简介

    BFC(Block Formatting Contexts),块级格式化上下文。
    IFC (Inline Formatting Contexts),行内格式化上下文。

    1、BFC

    盒模型

    规则

    属于同一个BFC的两个相邻Box垂直排列
    属于同一个BFC的两个相邻Box的margin会发生重叠
    BFC的区域不会与float的元素区域重叠
    计算BFC的高度时,浮动子元素也参与计算
    文字层不会被浮动层覆盖,环绕于周围

    条件

    根元素(body);
    浮动元素, float属性不为none;
    定位元素,position为absolute或fixed;
    display为inline-block,table-cell,table-caption,flex;
    overflow不为visible(即值为hidden/auto/scroll时);

    作用

    解决margin重叠问题(添加独立BFC)
    解决浮动高度坍塌问题(在父元素添加overflow:hidden)
    解决侵占浮动元素的问题(添加overflow:hidden)

    2、IFC

    IFC结构

    规则

    在一个行内格式化上下文中,盒子是一个接一个水平放置的,从包含块的顶部开始
    这些盒之间的水平margin,borer和padding都有效
    盒可能以不同的方式竖直对齐:以它们的底部或者顶部对齐,或者以它们里面的文本的基线对齐

    3、块盒,行盒(行内元素),行块盒(行内块元素)的区别

    块盒元素

    display: block;
    常见元素:div、p、h1~h6、header、footer、nav、hr、ul、ol、dl等
    特点:独占一行;可以设置宽高;宽度是父元素的100%;里面可以嵌套块级元素和行内元素;

    行盒(行内元素)

    display: inline;
    常见元素:span、a、img、br、label、strong、em、audio、video、b、i等
    特点:不会独占一行;不能设置宽高;宽度等于内部宽度;不允许嵌套块级元素;display为inline;a标签比较特殊可以嵌套块级元素,将a标签转换为块级元素

    行块盒(行内块元素)

    display: inline-block;
    常见元素:input、button
    特点:块级元素和行内元素的结合;可以设置宽高;宽度等于内容宽度’;不会独占一行;

    特殊元素

    img元素:默认disaplay为inline;但既有块盒效果也有行和效果:可以设置宽高;不会独占一行

    参考

    https://blog.csdn.net/qq_41996454/article/details/108903784
    IFC(行内格式化上下文) :https://www.jb51.cc/webfrontend/454409.html
    行内格式化上下文(Inline Formatiting Contexts) https://segmentfault.com/a/1190000009308818
    区别css,块盒,行盒(行内),行块盒(行内快)的不同:https://blog.csdn.net/dccose/article/details/105731673

    展开全文
  • 块级格式化上下文一、块级格式化上下文1.引言2.作用3.区域关系二、应用 一、块级格式化上下文 1.引言 全称Block Formatting Context,简称BFC,它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局。 ...

    一、块级格式化上下文

    1.引言

    全称Block Formatting Context,简称BFC,它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局
    创建BFC渲染区域,有三种方式
    1.根元素
    2.浮动和绝对定位元素
    3.overflow不等于visible的块盒
    使用时按对布局影响最小的方式使用

    2.作用

    1. 不同的BFC区域,它们进行渲染时互不干扰
    2. 创建BFC的元素,隔绝了它内部和外部的联系,内部的渲染不会影响到外部

    3.区域关系

    在这里插入图片描述

    二、应用

    1. 常规流块盒在水平方向上,必须撑满包含块
    <style>
        .container{
            background: lightblue;
            /* position: absolute; */
            /* float: left; */
            /* overflow: hidden; */
        }
        .clearfix{
            overflow: hidden;
            /* 副作用最小的方式 */
        }
        .item {
            float: left;
            width: 200px;
            height: 200px;
            margin: 20px;
            background: red;
        }
    </style>
    <div class="container clearfix">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    

    因为item浮动脱离文档标准流,那么让它的父元素创建BFC渲染区域,即可以达到被子元素撑开的效果。
    2. 常规流块盒在包含块的垂直方向上依次摆放

    <style>
        .float{
            width: 200px;
            height: 200px;
            margin: 20px;
            background: red;
            float: left;
        }
    
        .container{
            height: 500px;
            background: #008c8c;
            /* bfc */
            overflow: hidden;
        }
    </style>
    <div class="float"></div>
    <div class="container"></div>
    

    正常情况下,container元素应该在自适应屏幕宽度,float元素“浮动”在它身上,创建BFC渲染区域后可以看到float元素,就变成各占部分。
    3. 常规流块盒若外边距无缝相邻,则进行外边距合并

    <style>
        .container{
            background: #008c8c;
            height: 500px;
            margin-top: 30px;
            overflow: hidden;
        }
        .child{
            height: 100px;
            margin: 50px;
            background: red;
        }
    </style>
    <div class="container">
        <div class="child"></div>
    </div>
    

    正常情况,会产生margin塌陷情况,两者外边距会合并出距离顶部最高的值,一同距离顶部50px,父级创建BFC后解决该问题。
    4. 常规流块盒的自动高度和摆放位置,无视浮动元素

    <style>
        .container{
            float: left;
            background: #008c8c;
        }
        .item{
    	    position: absolute;
            top: 0;
            left: 0;
            margin: 20px;
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
    <div class="container">
        <div class="item"></div>
    </div>
    

    父级坍塌

    展开全文
  • 文章目录BFC(块级格式化上下文)元素的显示模式那些元素会具有BFC的条件什么情况下可以让元素产生BFCBFC元素所具有的特性BFC的主要用途BFC 总结 BFC(块级格式化上下文) BFC(Block formatting context) 直译为"...
  • 含义: BFC(Block Formatting Context),即块级格式化上下文,是css视觉渲染的一部分;通常出现在一个块级元素中的浮动元素与其他元素的相互作用中,故对元素定位和清除浮动有重要意义; 块级格式化上下文触发条件...
  • 一、块级格式化上下文(BFC) 1、什么是块级格式化上下文? Block Formatting Contexts (BFC,块级格式化上下文)就是一个块级元素 的渲染显示规则 (可以把 BFC 理解为一个封闭的大箱子,,容器里面的子元素不会...
  • BFC:块级格式化上下文。它是一个独立的渲染区域,只有Block-level box参与,规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。常说的文档流分为定位流、浮动流和普通流三种。而普通流其实就是指...
  • css之BFC块级格式化上下文 BFC 定义 BFC(块级格式化上下文),一个创建了新的BFC的盒子是独立布局的,盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题 BFC...
  • BFC(块级格式化上下文) BFC(Block formatting context)直译为“块级格式化上下文”,它是一个独立的渲染区域,只有Block-level box(块)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,679
精华内容 671
关键字:

块级格式化上下文