最详细-BFC块级格式化上下文

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

web-chubby

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

阅读量258

点赞数 1

分类专栏： html+css 文章标签： css html web

本文链接：https://blog.csdn.net/weixin_44092099/article/details/107686766

版权

html+css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么为 BFC

BFC（Block Formatting Contexts ）就是即块级格式化上下文。是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

BFC的特性

我们大家都知道bfc的特性：

1.内部的元素会在垂直方向，从顶部开始一个接一个地放置。
2.元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻元素的margin会发生叠加
3.都是从最左边开始的。每个元素的margin box的左边，与包含块border box的左边(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
4.BFC的区域不会与float box叠加。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6.计算BFC的高度时，浮动元素也参与计算（当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动元素的高度）

触发BFC的方式

float 除了none以外的值 

overflow 除了visible 以外的值（hidden，auto，scroll ） 

display (table-cell，table-caption，inline-block, flex, inline-flex) 

position值为（absolute，fixed） 

fieldset元素

实例

<div id="box">
	<p>案例</p>
	<p>案例</p>
	<p>案例</p>
	<p>案例</p>
	<p>案例</p>
</div>
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	p {
		margin: 20px 0;
		border: 1px solid #000000;
	}
	#box {
		width: 500px;
		margin: 0 auto;
		background: #00FFFF;
	}
</style>

这里我门可以看到，第一个子盒子有上边距（不会发生margin穿透的问题）；两个子盒子的垂直距离为20px而不是40px，因为垂直外边距会折叠

那么有没有方法使他不重叠呢？答案肯定是有的

特性里面的第五条说了，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。所以让 p 标签处在另一个BFC 容器里面就好了

#box2{
	overflow: hidden;
}

<div id="box">
	<div id="box2">
		<p>案例</p>
	</div>
	<p>案例</p>
	<p>案例</p>
	<p>案例</p>
	<p>案例</p>
</di

实例2

<style type="text/css">
	* {
	  margin: 0;
	  padding: 0;
	}
	
	.Left{
		width: 50px;
		height: 50px;
		background: red;
		float: left;
	}
	.Right{
		width: 100px;
		height: 100px;
		background: blue;
	}
</style>

<body>
	<div class="Left">red</div>
	<div class="Right">blue</div>
</body>

从这个例子中看到，元素的外边距会触碰到包含块容器的外边框，也就是元素左边与容器左边相接触，与浮动元素发生了重叠。

解决办法就是给 .Right 也加上浮动

web-chubby

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
最详细-BFC块级格式化上下文

什么为 BFCBFC（Block Formatting Contexts ）就是即块级格式化上下文。是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。BFC的特性我们大家都知道bfc的特性：1.内部的元素会在垂直方向，从顶部开始一个接一个地放置。2.元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻元素的margin会发生叠加3.都是从最左边开始的。每个元素的margin box的左边，与包含块border box的左边(对于.
复制链接

扫一扫