BFC相关问题简介

最新推荐文章于 2023-09-13 00:13:50 发布

老衲的少女心i

最新推荐文章于 2023-09-13 00:13:50 发布

阅读量97

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/qq_42592823/article/details/114978200

版权

前端专栏收录该内容

81 篇文章 1 订阅

订阅专栏

BFC

我们认为浏览器会分为几部分：

用户界面：浏览器中可见的地址栏、前进后退、打开书签、历史记录。
网络，浏览器开启网络线程发送请求或下载资源文件。
浏览器引擎：最核心的东西。用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据，它是浏览器中各个部分相互通信的核心。
渲染引擎：（浏览器内核），解析DOM文档和CSS规则将内容排版到浏览器中。
UI后端：就是浏览器窗口中的各个控件。
javascript解释器，浏览器解释和执行javascript脚本的部分（v8）
数据持久化，cookie、session、localStorage。

块级格式化上下文（block formatting context），是web页面的可视化CSS渲染出的一部分，形成了BFC就形成了一个独立的区域区域里面的子元素不会影响到外面的元素。

形成`BFC`的方法：

浮动元素：元素的float不是none的元素。
绝对定位的元素：position的值为absolute或fixed。
内联块：display:inline-block
具有overflow并且值不是visible的块元素。
display为flow-root，只是单纯的触发BFC。

上面所说的1、2、3、4都可以形成BFC并且加上自己的特性。5个flow-root只是单纯的触发BFC。

形成`BFC`后通常用来做的事：

爸爸管理儿子，让爸爸能够包裹住儿子（父元素上使用，来，爸爸抱抱。）

解决float高度塌陷问题（这种方法不是所谓的清除浮动）

<!DOCTYPE html>
<html>
    <head>
        <style>
            #f{
                width:200px;
                border:5px solid green;
                /* overflow:hidden; */
                display:flow-root;
            }
            #z{
                float:left;
                width:100px;
                height:100px;
                border:1px solid blue;
            }
        </style>
    </head>
    <body>
        <div id="f">
            <div id="z"></div>
        </div>
    </body>
</html>

在这里插入图片描述

解决父子之间`margin`合并问题

<!DOCTYPE html>
<html>
    <head>
        <style>
            #f{
                width:200px;
                /* border:5px solid green; */
                margin-top:10px;
                display:flow-root;
            }
            #z{
                margin-top:20px;
                width:100px;
                height:100px;
                border:1px solid blue;
            }
        </style>
    </head>
    <body>
        <div id="f">
            <div id="z"></div>
        </div>
    </body>
</html>

在这里插入图片描述

兄弟之间划清界限（子元素上使用，亲兄弟明算账）

解决兄弟之间上下外边距折叠问题：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #f{
                width:200px;
                border:1px solid pink;
                margin-top:10px;
            }
            #z1,#z2{
                margin-top:20px;
                margin-bottom:20px;
                width:100px;
                height:100px;
                border:1px solid blue;
            }
            #f div{
                display:flow-root;
            }
        </style>
    </head>
    <body>
        <div id="f">
            <div>
                <div id="z1"></div>
            </div>
            <div id="z2"></div>
        </div>
    </body>
</html>

在这里插入图片描述

解决`float`块状元素重叠，行内元素不重叠问题。

<!DOCTYPE html>
<html>
    <head>
        <style>
            img{
                float:left;
            }
            #f div{
                border:1px solid green;
                display:flow-root;
            }
        </style>
    </head>
    <body>
        <div id="f">
            <img src="./1.jpg" />
            <div>123456</div>
        </div>
    </body>
</html>

解决问题之前：

（就是没有添加`display:flow-root;`之前，上面例子的类似，这里就只有这个案例有解决问题之前的截图，上面的，需要了解的，可以自己复制代码，后注释这行`display:flow-root;`代码，进行问题解决之前的效果查看）

在这里插入图片描述

解决问题之后：（就是添加display:flow-root;之后）
在这里插入图片描述

当我们遇见这个问题的时候，我们首先要想：

1.什么是BFC 2.怎么形成BFC 3.用BFC干什么 ，利用BFC的特性来做这个事。

老衲的少女心i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC相关问题简介

BFC我们认为浏览器会分为几部分：用户界面：浏览器中可见的地址栏、前进后退、打开书签、历史记录。网络，浏览器开启网络线程发送请求或下载资源文件。浏览器引擎：最核心的东西。用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据，它是浏览器中各个部分相互通信的核心。渲染引擎：（浏览器内核），解析DOM文档和CSS规则将内容排版到浏览器中。UI后端：就是浏览器窗口中的各个控件。javascript解释器，浏览器解释和执行javascript脚本的部分（v8）数据持久化，cookie、sess
复制链接

扫一扫