CSS之BFC详解_css中的bfc

作者：从前慢现在也慢 | 2024-02-22 06:36:14

踩

css中的bfc

在了解BFC前，首先需要知道它是什么，它有哪些特性，它是如何形成的。

一、什么是BFC

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

二、BFC的特性

内部的box会在垂直方向，一个接一个的放置；
box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠；
bfc的区域不会与浮动区域的box重叠；
bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，里面的也不会影响外面的；
计算bfc高度的时候，浮动元素也会参与计算。

三、如何形成BFC

渲染float属性不为none（脱离文档流）；
position为absolute或fixed（脱离文档流）；
display为inline-block,table-cell,table-caption,flex,inine-flex；
overflow不为visible（为 hidden、auto、scroll时）。

四、应用场景

防止垂直margin重叠；
自适应两栏、三栏布局；
清除内部浮动。

五、案例

1、防止垂直边距重叠

垂直边距重叠示例：常规两个盒模型上下边距会重叠，取两者边距最大值，如下图所示：
在这里插入图片描述

防止上下box垂直边距重叠：这里用float产生BFC，当然还有其它方式也可以产生同样效果，这里就不一一举例了。
在这里插入图片描述

2、两栏布局

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.left{
			float:left;
			width:200px;
			background-color:red;
			min-height:100%;
			height:300px;
		}
		.right{
			overflow:hidden;
			background-color:green;
			height:300px;
		}
	</style>
</head>
<body>
	<h1>左右布局，左侧固定宽度200px,右侧宽度自适应</h1>
	<div class="left"></div>
	<div class="right"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3、清除浮动

清除浮动案例1：

图文环绕：img标签采用float:left浮动在左侧，覆盖在p标签上方。
在这里插入图片描述

用BFC防止文字环绕图片：为文字标签添加overflow:hidden，产生BFC效果
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		img{
			float:left;
			width:100px;
			height:100px;
			border:solid 1px #666;
		}
	</style>
</head>
<body>
	
	<div class="img-txt">
		<img src="https://img02.sogoucdn.com/app/a/100520021/B78C3A9378E757CBB073D97E8B4E7062"> 
		<p style="overflow:hidden">好好学习，天天向上！说的很有道理，正所谓不学无术嘛~~ 好好学习，天天向上！说的很有道理，正所谓不学无术嘛~~好好学习，天天向上！说的很有道理，正所谓不学无术嘛~~好好学习，天天向上！说的很有道理，正所谓不学无术嘛~~</p>
	</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

清除浮动案例2：

浮动元素不能撑起处于标准文档流中父层容器的高度，添加overflow:hidden 可清除浮动

实例：
一个父容器有两个浮动的子容器，该父容器的高度没有被子容器撑起，高度为0，宽度为行宽，如下图所示

在这里插入图片描述

为父容器添加overflow:hidden，清除浮动后，它的高度为子容器撑起的高度，宽度为行宽，如下图所示
在这里插入图片描述

为父容器添加float:left使它浮动，它的宽高为子容器撑起的宽高，如下图所示：
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/128917?site