其他分享
首页 > 其他分享> > CSS--BFC

CSS--BFC

作者:互联网

BFC :(Block Formatting Context), 名为 “块级格式化上下文”。

BFC是一个独立的布局环境,BFC内部的元素布局与外部互不影响。

它是页面中的一块渲染区域,并且有一套属于自己的渲染规则,它决定了元素如何对齐内容进行布局,以及与其他元素的关系和相互作用。当涉及到可视化布局的时候,BFC提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。

简单来说就是,BFC就是页面中的一个隔离的独立容器,容器里的标签不会影响到外部标签。

 

怎么触发BFC?

BFC可以看做是一个CSS元素属性

BFC解决了什么问题

1.使用Float脱离文档流,高度塌陷

<div class="container">
        <div class="box"></div>
</div>
<style>
        .box {
            width: 100px;
            height: 100px;
            float: left;
        }
        .container {
            border: 1px solid red;
        }
</style>

box设置完float之后,脱离文档流,使container高度没有被撑开。解决此问题可以给container触发BFC,上面我们所说到的触发BFC属性都可以设置。

.container {
            border: 1px solid red;
            overflow: hidden;
}            

2.Margin边距重叠

<div class="box"></div>
<div class="box"></div>
<style>
        .box {
            width: 100px;
            height: 100px;
            margin: 10px;
        }
        .container {
            border: 1px solid red;
        }
</style>

两个盒子的margin外边距设置的是10px,可结果显示两个盒子之间只有10px的距离,这时margin边距的结果为最大值10px,而不是和20px,这就导致了margin塌陷问题。解决此问题可以使用BFC规则(为元素包裹一个盒子形成一个完全独立的空间,做到里面元素不受外面布局影响 )

<p>
  <div class="box"></div>
</p>

.p{
  overflow: hidden;  
}

3.两栏布局

<div style="float: left;">
</div>
<div style="width: 300px;">
</div>

div {
      width: 200px;
      height: 100px;
      border: 1px solid red;
}

第二个div元素为300px宽度,但是被第一个div元素设置Float脱离文档流给覆盖上去了,解决此方法我们可以把第二个div元素设置为一个BFC

<div style="float: left;">
</div>
<div style="width: 300px;display:flex;">
</div>

 

标签:BFC,container,--,元素,100px,1px,red,CSS
来源: https://www.cnblogs.com/Super-scarlett/p/15855526.html