BFC简介

最新推荐文章于 2023-03-30 15:05:54 发布

Shirley_0513

最新推荐文章于 2023-03-30 15:05:54 发布

阅读量190

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Shirley_0513/article/details/103526048

版权

53 篇文章 0 订阅

订阅专栏

1、BFC

BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Blocklevel box（块）参与，它规定了内部的Blocklevel Box如何布局，并且与这个区域外部毫不相干。

2、BFC的布局规则

1）、内部的Box会在垂直方向，一个接一个地放置。

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

3）、每个元素的margin box的左边，与包含块border box的左边相接触

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

5）、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

6）、计算BFC的高度时，浮动元素也参与计算

3、哪些元素或属性能触发BFC

根元素

float属性不为none

position为absolute或fixed

display为inlineblock, tablecell, tablecaption, flex, inlineflex

overflow不为visible

4、BFC的作用及原理

1）、自适应两栏布局

 .aside{
	 width:100px; 
	 height:150px; 
	 float:left; 
	 background:#f66;
 } 
 .main{
	 height:200px; 
	 background:#fcc;
	 overflow: hidden;
 }

<body>
 <div class=”aside”></div> 
 <div class=”main”></div>
  </body>

给main添加overflow: hidden;

2）、清除内部浮动

 Div{
	 width:500px; 
	 border:10px solid #fcc
 } 
 P{
	 width:100px; 
	 height:100px;
	 border:1px solid #f66; 
	 float:left;
  }

 <body> <div> <p></p> <p></p> </div> </body>

给div添加overflow：hidden

3）、防止margin重叠

 P{
	 width:100px;
	 height:100px; 
	 background:#f00; 
	 margin:100px;
  }

 <body> <p></p> <p></p> </body>

给第二个p添加一个盒子并添加overflow:hidden;

关注

专栏目录