什么是bfc

最新推荐文章于 2024-06-19 16:19:47 发布

好好学习,

最新推荐文章于 2024-06-19 16:19:47 发布

阅读量99

点赞数

分类专栏： bfc 文章标签： html5 css

本文链接：https://blog.csdn.net/qq_44957616/article/details/104601149

版权

bfc 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

BFC简介

BFC：

块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level 盒子参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

触发BFC

对于HTML文件来说，只要满足下面CSS声明中的一个就会产生BFC
根元素(html)
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

BFC 的布局规则

一、内部的Box会在垂直方向，一个接一个地放置。
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
三、每个元素的margin box的左边，与包含块border box的左边相接触
四、BFC的区域不会与float box重叠。
五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
六、计算BFC的高度时，浮动元素也参与计算

BFC的应用

1、自适应两栏布局
2、清除内部浮动
3、防止margin上下重叠

	<style type="text/css">
		 html, body {
		  height: 100%;
		  width: 100%;
		  margin: 0;
		  padding: 0;
		}
		.first{
		  margin:20px;
		  background:lightgreen;
		  width:100px;
		  height:100px;
		}
		ul{
		  margin:10px;
		  background:lightblue;
		}
		li{
		  margin:25px;
		}
	</style>
	
<body>
	<div class="first"></div>
	<ul>
	    <li>1</li>
	    <li>2</li>
	    <li>3</li>
	</ul>
</body>

在这里插入图片描述
黄框区域的为25px，也就是说将ul的margin的值覆盖掉了,此时div与ul之间的垂直距离，取div、ul、li三者之间的最大外边距。。如果要防止元素的重叠，就要让url出发并生成BFC

	<style type="text/css">
		html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
		.first{
		  margin:20px;
		  background:lightgreen;
		  border: 2px solid lightgreen;
		}
		ul{
		  overflow:hidden;
		  margin:10px;
		  background:lightblue;
		  width:100px;
		  height:200px;
		  float: left;
		}
		li{
		  margin:25px;
		}
	</style>

<body>
	<div class="first"></div>
	<ul>
	    <li>1</li>
	    <li>2</li>
	    <li>3</li>
	</ul>
</body>

在这里插入图片描述

好好学习,

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
什么是bfc

BFC简介BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level 盒子参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。触发BFC对于HTML文件来说，只要满足下面CSS声明中的一个就会产生BFC根元素(html)float属性不为noneposition为absolute或fixeddisplay为inline-block, tabl...
复制链接

扫一扫