首页 > 其他分享> 文章详细

BFC的理解与应用

2021-06-09 19:58:55 阅读：183 来源： 互联网

标签：BFC 文字 background color 100px 理解应用 margin

BFC (Block Fromatting Context)块级格式化上下文，是一个独立的渲染区域，内部元素的渲染不会影响外边的元素。

形成BFC的条件

float属性不是none；
position是absolute或fixed；
display是inline-block, table-cell, table-caption, flex, inline-flex；
overflow不是visible；

BFC的应用

1. 避免margin纵向重叠问题

未形成BFC造成margin纵向重叠问题，前面就演示过了，下面是margin纵向重叠问题的链接。

https://blog.csdn.net/m0_47901007/article/details/117629124

下面是形成BFC后的页面效果：

	<div class="bfc">
        <div class="box1">box1</div>
    </div>
    <div class="box2">box2</div>

 		.bfc{
            overflow: hidden;
        }
        .box1{
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: green;
        }

在这里插入图片描述
2. 避免脱离文档流，造成高度塌陷问题

首先演示一下，因为脱离标准文档流，而造成高度塌陷的问题。

页面结构代码：

    <div class="bfc">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>

页面样式代码：

 		.bfc{ //现在它还不是BFC，不要被这个样式名吓到
            /* overflow: hidden; */
            border: 1px solid #000;
        }
        .box1{
            float: left;
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: red;
        }
        .box2{
            float: left;
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: green;
        }

高度塌陷页面效果：

在这里插入图片描述
将CSS代码中 overflow: hidden 注释去掉，形成BFC后的页面效果：

在这里插入图片描述
3. 避免浮动元素对页面覆盖

未形成BFC形成页面覆盖效果演示：

老样子先上HTML代码:

    <div>
        <div class="box1">浮动元素</div>
        <p>
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
        </p>
    </div>

然后是CSS代码:

        .box1{
            float: left;
            width: 200px;
            height: 200px;
      
            background-color: red;
        }
        p{
        	/* overflow: hidden; */
            background-color: green;
        }

最后是效果展示：

在这里插入图片描述
再去掉CSS的注释，形成BFC效果：

在这里插入图片描述
结语

到此本章就结束了，谢谢大家的观看！

如有问题欢迎各位指正

记得点赞 + 收藏。

标签：BFC,文字,background,color,100px,理解,应用,margin
来源： https://blog.csdn.net/m0_47901007/article/details/117742236

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

BFC的理解与应用

形成BFC的条件

BFC的应用