CSS高级开发-----BFC(块格式化上下文)

最新推荐文章于 2024-10-31 06:29:51 发布

RexingLeung

最新推荐文章于 2024-10-31 06:29:51 发布

阅读量148

点赞数

分类专栏： html css基础文章标签： css3

本文链接：https://blog.csdn.net/RexingLeung/article/details/105007382

版权

css基础同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

css布局基础单位

Box是CSS布局的对象和基本单位 , 直观点来说 , 就是一个页面是由多个BOX组成的 , 元素的类型和display属性 , 决定了这个box类型 , 不同类型的box , 会参与不同的FormattingContext ( 一个决定如何渲染文档的容器 ) , 因此Box内的元素会以不同的方式渲染 , 让我们看看有哪些盒子 :

block-level box:display 属性为block , list-item , table 的元素 , 会生成block-levelbox, 并且参与block fomatting context ;
inline-level box:display属性为 inline , inline-block , inline-table的元素 , 会生成inline-level box , 并且参与block fomatting context ;
Fomatting context 是w3c css2.1规范中的一个概念 , 它是页面中的一块渲染区域 , 并且有一台渲染规则 ,他决定了其子元素将如何定位 , 以及和其他元素的关系和相互作用 , 最常见的Fomatting context 有block fomatting context(BFC) 和inline formatting context(简称IFC)

什么是BFC

Box : CSS布局的基本单位
BFC全称 --- 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域

BFC布局规则

每个元素的marginbox的左边 , 与包含块border box的左边相接触 ( 对于从左往右的格式化 , 否则相反 ) , 即使存在浮动也是如此
BFC的区别不会与float box重叠

创建BFC的Box方式

根元素(<html>)
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 paint 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

注意 : BFC( 块格式化上下文 ) 对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

BFC例子

#### 让浮动内容和周围的内容等高

代码

html部分

<!--html部分-->
<div class="box">
        <div class="float">我是浮动元素, 带透明背景色</div>
        <div>我在标准元素内</div>
</div>

css部分

/* css部分 */

.box {
            background-color: green;
            padding: 50px;
        }
        .float {
            float: left;
            width: 100px;
            height: 150px;
            background: rgba(255,2,3,0.3);
            border: 1px solid black;
        }

效果图

让浮动内容和周围的内容等高标题

#### 使用overflow: auto

创建一个会包含这个浮动的BFC，通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。
一个简单的例子 , 父盒子下有多个float标签 , 导致父盒子高度塌陷的问题 , 我们就需要在父盒子添加overflow: auto属性即可

例子如下
html部分


<div class="box">
        <div class="float">我是浮动元素, 带透明背景色</div>
        <div>我在标准元素内</div>
    </div>

css部分


      .box {
            background-color:green;
            overflow: auto;
        }
        .float {
            float: left;
            width: 100px;
            height: 150px;
            background: rgba(255,0,0,0.3);
            padding: 10px;
        }

效果图如下

还有一个解决方法 , 就是在父盒子闭合前添加块级一个元素 , 并设置clear: both ; 一般使用伪元素作为清除浮动的方法修改上面css代码如下


.box {
            background-color:green;
            /* overflow: auto; */ /* 把这个删掉 */
        }
        .box::after{ /* 添加伪元素  ::after , 即在父盒子闭合前的元素 */
            content: "";
            display: block;/*  一定要是块级元素 */
            clear: both;/* 前后浮动都清除 */
        }
       .float {
            float: left;
            width: 100px;
            height: 150px;
            background: rgba(255,0,0,0.3);
            padding: 10px;
        }

BFC外边距塌陷

在两个BFC盒子之间 , 会出现外边距合并的问题这里蓝色盒子和绿色盒子上下外边距都为50px , 但是他们会共用外边距

html部分

 <div class="blue">我下外边距50px</div>
<div class="green-inner">我上外边距50px</div>

css部分

        .blue {
            background: blue;
        }

        .green-outer {
            overflow: hidden;
            background: green;
        }

效果如下

BFC外边距塌陷.png
标题

解决方法 , 在一个BFC盒子上或者有影响的BFC盒子外面套一个div , 然后设置外层div的overflow: auto
代码如下
html部分


    <div class="blue">我下外边距50px</div>
    
    <div class="green-outer">
        <div class="green-inner">我上外边距50px</div>
    </div>

css部分

         .blue {
            background: blue;
        }
        
         .blue,
        .green-inner {
            height: 50px;
            margin: 10px 0;
        }
 
        .green-outer {
            overflow: hidden;
            background: transparent;
        }

效果如下 , 这也上下BFC盒子的外边距就不受影响了