BFC（块级格式上下文）

最新推荐文章于 2023-10-22 20:47:47 发布

友人C君~

最新推荐文章于 2023-10-22 20:47:47 发布

阅读量351

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/CWH0908/article/details/89202638

版权

CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

BFC（块级格式上下文）

可以解决：清除浮动问题、外边距合并问题、右侧自适应问题

BFC的生成

满足下列css声明之一的元素便会生成BFC

根元素
float的值不为none
overflow的值不为visible（常用 overflow:hidden创建BFC区域）
display的值为inline-block、table-cell、table-caption
position的值不为static或relative

BFC元素具有的特性

1、BFC区域与外部的布局互不相干。

2、在BFC中，盒子从顶端开始垂直地一个接一个地排列。

3、盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠（解决margin重叠问题，将发生嵌套的一个元素在外面嵌套一个父类并设置overflow:hidden）。

4、在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left），对于从右到左的格式来说则触碰到右边缘。

5、BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘（可以做左图右文字的自适应布局）。

6、计算BFC的高度值，会检测BFC区域的浮动的盒子高度（清除浮动）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>BFC块级上下文</title>
		<style type="text/css">
		body,html{
			height: 300px;
			background: gray;
		}
		.father{
			overflow: hidden;
		}
		.first{
		  background:red;
	    width:50px;
		  height:50px;
		  margin:10px;
		  overflow: hidden;
		}
		.second{
		  background:yellow;
	    width:50px;
		  height:50px;
		  margin:10px;
		  overflow: hidden;
		  float: left;
		}	
		.article{
			width: 100px;
			height: 100px;
			background: blue;
			margin: 10px;
		}	
		.over{
			overflow: hidden;
		}			
		</style>
	</head>
	<body>
	  <div class="father">
	  	
	    <div class="first">
	        1
	    </div>
	    <div class="over">
	        <div class="second">2</div>
	    </div>    
	   
	  </div>		
	  

	</body>
</html>

理解CSS中的BFC(块级可视化上下文)

参考链接：https://www.jianshu.com/p/82ef089d7a88

友人C君~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BFC（块级格式上下文）

BFC（块级格式上下文）可以解决：清除浮动问题、外边距合并问题、右侧自适应问题BFC的生成满足下列css声明之一的元素便会生成BFC根元素 float的值不为none overflow的值不为visible（常用 overflow:hidden创建BFC区域） display的值为inline-block、table-cell、table-caption position的...
复制链接

扫一扫

专栏目录