连BFC都不知道谈什么前端工程师

个人博客

连BFC都不知道谈什么前端工程师

 tangzihan  2020-04-23 09:11:19 17人已围观【css】【html】

**BFC(块级格式化上下文)**

> BFC是个独立的渲染区域，只有块级盒子参与，它规定了内部的盒子如何布局，但不会影响外部盒子

简单的说 它就是一块封闭的区域，里面的盒子在怎么动也不会影响外面的布局。
创建BFC也有条件
只有display属性为 `block`,`list-item`,`table`的元素才能创建BFC
BFC有宽度，高度。有外边距margin,有内边距外边框
**BFC的特性**
1.在BFC中，盒子从顶端开始垂直地一个接一个地排列
2.盒子垂直方向的距离由margin决定，在同一个BFC区域的两个相邻盒子的margin会发生重叠
如下margin重叠

```php
.father{
			width:500px;
			height:300px;
			background: skyblue;
		}
		.son1{
			width:100px;
			height:50px;
			background: red;
			margin-bottom:100px;
		}
		.son2{
			width:100px;
			height:50px;
			background: blue;
			margin-top: 50px;
		}
		//
		<div class='father'>
		<div class='son1'></div>
		<div class='son2'></div>
	</div>
```
我们将son盒子放到father盒子中，并设置son1盒子下边距为100px;son2盒子上边距为50px
我们没有设置浮动，那么他们之间的边距应该是100px+50px对吧？
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200211132639424.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE0MzQ4MQ==,size_16,color_FFFFFF,t_70)
浏览器显示结果并不是这样，他们之间的边距实际上只有100像素，这就是典型的**边距重叠**，如何解决这种问题？第一，尽量避免这种情况，像这种情况直接把边距给一个盒子即可
第二，既然这种问题是有BFC引起的，通过BFC的特性我们知道，在同一BFC区域的连个相邻盒子会发生边距重叠，那我们不让这两个盒子在同一个BFC区域不就行了吗？

```php
	.bfc{
			overflow: hidden;
		}
<div class='father'>
       
		<div class='bfc'>
		//单独BFC区域
			<div class='son1'></div>
		</div>
		
		<div class='son2'></div>
	</div>
```
这里我们将son1盒子放置在bfc盒子中，并设置bfc盒子`overflow:hidden`添加这个属性的目的并不是想隐藏超出的内容，而是通过这个属性创建BFC区域（下面会讲到）
浏览器在查看
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200211133549534.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE0MzQ4MQ==,size_16,color_FFFFFF,t_70)
解决了之前的边距重叠问题。
3.在BFC中每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘（border-left）(对于从右到左的格式来说，则触碰到最右边缘)
意思就是子盒子设置边距是从父元素的border开始的。

4.BFC区域不会与浮动盒子产生交集，而是紧贴浮动边缘，自适应
意思就是BFC区域的盒子不会和浮动的盒子连在一起，如下

```php
.father{
	width:300px;
	height:200px;
	background: skyblue;
	float: left;
}
.txt{
	width:400px;
	height:300px;
	background: red;
}
//结构
<div class='father'></div>
	<div class='txt'>
		文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
	</div>
```
father盒子设置左浮动，txt是一篇文章盒子
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200211134540186.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE0MzQ4MQ==,size_16,color_FFFFFF,t_70)
由图可见，文章盒子与蓝色盒子重合在一起了导致我们的文章显示不正常，因为蓝色盒子设置了左浮动，对于这种解决办法就是给文章盒子创建BFC区域，我们给文章盒子加上`overflow`属性
正常显示
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200211134826782.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE0MzQ4MQ==,size_16,color_FFFFFF,t_70)
5.计算BFC的高度时，自然也会检测浮动的盒子高度
这个在上一篇CSS清除浮动我们讲到，给元素添加`overflow`属性（创建BFC）也可清除浮动
至于BFC为什么能清除浮动就是因为他的第五个特性。

**怎样触发BFC**
1.添加float属性，且值不能为visible
2.position为absolute或fixed
3.display为inline-block,table-cell,table-caption,flex,inline-flex
4.添加overflow不为visible
5.根元素
6.float属性不为none

**BFC的用途**
1.清除元素内部浮动
2.解决外边距合并的问题
3.制作右侧自适应的盒子问题

文章评论

#@热心网友 2020-06-30 17:47:01