BFC总结

最新推荐文章于 2023-02-01 21:14:38 发布
最新推荐文章于 2023-02-01 21:14:38 发布
阅读量163 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45635596/article/details/110200766
版权

BFC block formatting contexts

概念

块级元素的独立渲染区域

触发条件

1.根元素 2.float不为none 3.overflow不为visible
4.dispaly：inline-block/table-cell/table-caption/flex/inline-flex
5.position:absolute/fixed

特性和应用

1.Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止margin重叠）

<style>
			.box1{
				width: 200px;
				height: 200px;
				background-color: orange;
				margin-bottom: 30px;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: green;
				margin-top: 40px;
			}
			.boxs{
				/* overflow: scroll; */
				/* float: left; */
				display: inline-block;
			}
		</style>
		<body>
		<!-- Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠 -->
		<!-- 属于同一个BFC的两个相邻box的margin会发生重叠 -->
		<div class="box1">1</div>
		<div class="boxs">
			<div class="box2">2</div>
		</div>
	</body>
	<!-- 
 按照现在的显示结果，margin的上下间距重叠，原因是因为box1和box2都在html里面，而html就是当前文档的根元素，这个根元素默认就是BFC，box1和box2都是在HTML里面的，所以属于同一个BFC的两个相邻box的margin会发生重叠
 
 当给box2添加了父元素boxs且添加了overflow之后，该父元素boxs就是BFC了，这个时候，box2属于boxs这个BFC，而box1属于HTML这个BFC，他们2个属于不同的BFC，所以不会发生重叠
 -->

2.BFC的区域不会与float box发生重叠（应用：自适应两栏布局）

两栏布局，需要2栏不重叠，且左边的盒子宽度固定是100，右边的盒子宽度自适应

<style>
			body{
				margin: 0;
			}
			.left{
				width: 100px;
				height: 300px;
				background: orange;
				float: left;
				/* position: absolute; */
			}
			.right{
				height: 700px;
				background: skyblue;
				/* 方法1：是因为触发了right为BFC，BFC区域不会与浮动盒子发生重叠 */
				/* overflow: hidden;
				overflow: auto;
				overflow:scroll; */
				/* display: flex; */
				/* 方法2：
				width: calc(100% - 100px);
				float: left; */
				/* 方法3： */
				margin-left: 100px;
			}
		</style>		
<body>
		<div class="left">左边的</div>
		<div class="right">右边的</div>

</body>

三栏自适应左右两栏固定宽高，中栏自适应

<style>
			body{
				margin: 0;
			}
			/* 方法1：
			.left{
				width: 100px;
				height: 200px;
				background: orange;
				float: left;
			}
			.center{
				height: 300px;
				background: blue;
				margin-left: 100px;
				margin-right: 200px;
			}
			.right{
				width: 200px;
				height: 200px;
				background: green;
				float: right;
			}
			 */
			/* 方法2： 
			.left{
				width: 100px;
				height: 200px;
				background: orange;
				float: left;
			}
			.center{
				height: 300px;
				background: blue;
				margin-left: 100px;
				margin-right: 200px;
			}
			.right{
				width: 200px;
				height: 200px;
				background: green;
				position: absolute;
				right: 0;
				top: 0;
			}
			*/
		   /* 方法3 
			.left{
				width: 100px;
				height: 200px;
				background: orange;
				float: left;
			}
			.center{
				height: 300px;
				background: blue;
				方法3 width: calc(100% - 300px);
				float: left; 
				 方法4 
				overflow: hidden;
			}
			.right{
				width: 200px;
				height: 200px;
				background: green;
				float: right;
			}*/
			/* 方法5 */
			.left{
				width: 100px;
				height: 200px;
				background: orange;
				float: left;
			}
			.center{
				height: 300px;
				background: blue;
				position: absolute;
				left: 100px;
				width: calc(100% - 300px);
			}
			.right{
				width: 200px;
				height: 200px;
				background: green;
				float: right;
			}
		</style>

<body>
		<!-- 方法1： -->
		<!-- <div class="left">左边的</div>
		<div class="right">右边的</div>
		<div class="center">中间的</div> -->
		
		<!-- 方法2 -->
		<!-- <div class="left">左边的</div>
		<div class="center">中间的</div>
		<div class="right">右边的</div> -->
		
		<!-- 方法3 -->
		<!-- <div class="left">左边的</div>
		<div class="right">右边的</div>
		<div class="center">中间的</div> -->
		<!-- 方法4 -->
		<div class="left">左边的</div>
		<div class="center">中间的</div>
		<div class="right">右边的</div>
	</body>

双飞翼

<style>
			body{
				margin: 0;
			}
			
			.content div{
				float: left;
			}
			.left{
				width: 100px;
				height: 200px;
				background: orange;
				margin-left: -100%;
				
			}
			.right{
				width: 100px;
				height: 200px;
				background: blue;
				margin-left: -100px;
				
			}
			.center{
				height: 300px;
				background: skyblue;
				width:100%;
			}
			.middle{
				height: 300px;
				background: yellow;
				margin-left: 100px;//使用定位
				width: calc(100% - 200px);
				
			}
		</style>
		<body>
		<div class="content">
			<div class="center">
				<div class="middle">中间的</div>
			</div>
			<div class="left">左边的</div>
			<div class="right">右边的</div>
		</div>
	</body>

圣杯

<style>
			body{
				margin: 0;
			}
			.content{
				padding-left: 100px;
				padding-right: 100px;
			}
			.content div{
				float: left;
			}
			.left{
				width: 100px;
				height: 200px;
				background: orange;
				margin-left: -100%;
				position:absolute;
				left: 0;
			}
			.right{
				width: 100px;
				height: 200px;
				background: blue;
				position:absolute;
				right: 0;
			}
			.center{
				height: 300px;
				background: skyblue;
				width:100%;
			}
		</style>
		<body>
		<div class="content">
			<div class="center">中间的</div>
			<div class="left">左边的</div>
			<div class="right">右边的</div>
		</div>
	</body>

3.计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）

<style>
			body,p{
				margin: 0;
			}
			div{
				border: 2px solid blue;
				/* overflow: scroll; */
				/* float: left; */
				/* display: table-cell; */
				/* display: inline-block; */
				/* display: flex; */
				/* position: absolute; */
				position: fixed;
			}
			p{
				width: 100px;
				height: 100px;
				background: orange;
				float: left;
			}
		</style>
<body>
		<!-- 计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动） -->
		<div>
			<p>1</p>
			<p>2</p>
			<p>3</p>
		</div>
	</body>

4.BFC内部的Box会在垂直方向，一个接一个的放置。
5、每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。
6、BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素

白开水煮白菜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
对BFC的总结
weixin_43601554的博客
06-12 293
什么是BFC？一、BFC的定义二、BFC的布局规则三、怎么创建BFC四、BFC的常见作用五、总结 一、BFC的定义 BFC（Block Formatting Context）全称为块级格式化上下文。简单来说，BFC是一种属性，并且只会作用于Block-level box（块级元素）。设置了这种属性的元素会成为一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 二、BFC的布局规则 属于同一个 BFC 的两个相邻 Box 垂直排列 属于同一个 BFC 的两个相
imaxue#progress#19-03-BFC总结2
07-25
1. bfc的元素不会和float元素相重叠， 2. bfc子元素即使是float也会参与高度计算 2. position的值不是static或者relativ
BFC详解
DGL_CSDN的博客
08-30 322
1 BFC BFC（Block Formatting Context），块级格式化上下文，它规定了内部的块级元素的布局方式，默认情况下只有根元素（即body）⼀个块级上下文。 BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响 可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题 可以将BFC想象成一个工具，无需探究其定义，只要着重理解其功能（特性）即可 1.1 BFC布局规则 内部的块级元素会在垂直方向，⼀个接⼀个地放置 块级元素垂
梳理浮动和BFC
牛先森家的博客
05-12 259
浮动： float：定义网页中其他文本如何环绕该元素显示 CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止 浮动的添加 float的属性值： left （元素左浮动） right （元素右浮动） none （默认值，不浮动） inherit （将会从父元素获取float值） 浮动的特点： 浮动的元素脱离文档流的，不占据空间 如果让多个元素横向排列，这些元素都要添加浮动 如果添加浮动的子元素总宽超过父元素的宽度，那么最后一个
理解CSS中的BFC
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
03-30 484
理解CSS中的BFC BFC 定义 BFC布局规则 会生成BFC的元素 BFC的应用
bfc的详细介绍以及大总结
01-17
### BFC（Block Formatting Context）的详细介绍与大总结 #### 一、BFC的基本概念 BFC，全称为Block Formatting Context（块级格式化上下文），是CSS中一种特殊的渲染规则，它决定了内部元素如何布局以及与其他...
BFC实现自适应两栏布局
01-20
总结来说，理解并熟练运用BFC机制是CSS布局中的关键技能，它能够帮助开发者解决很多复杂的布局问题，实现自适应的页面设计。无论是避免高度塌陷，还是创建自适应的两栏布局，BFC都是一个强大的工具。通过触发BFC，...
CSS学习总结
09-24
BFC内部的元素按照特定规则排列，比如垂直方向上依次放置，margin会发生重叠，并且BFC区域不会与浮动元素重叠。创建BFC的条件包括根元素、浮动元素、绝对定位元素、`display`值为`inline-block`、`table-cell`等的...
BFC知识点考核
最新发布
uperficialyu的博客
02-01 316
BFC知识点考核
关于浮动和BFC的理解
weixin_30456039的博客
04-08 282
遇到过很多次关于左边图片右边文字，文字环绕图片 || 防止文字（或其他元素）环绕 的问题，今天给自己做一个小小的总结。 浮动根据官方的说法是：CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 || 浮动元素之后的元素将围绕它。 || 浮动元素之前的元...
高度坍塌问题--BFC模式解析
xiaowei的博客
11-10 3245
问题引起是2016IFE春季问题的任务三，总的父元素parent包含三个浮动的子元素，容器的高度不能自动伸长以适应内容的高度，出现了高度坍塌问题。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高度坍塌问题-BFC模式解析</title> <style> .parent
浮动与BFC
weixin_47409897的博客
05-21 489
一、浮动 所谓的浮动：就是几个子元素脱离文本流，在父元素上一行排序 作用：让元素在父元素内部横向排序 属性：属性值 — float：left; lefy right none 1：特点： 1：脱离文本流，不占据空间 （不清除浮动的话，后面的文本流会直接补上该位置，浮动元素覆盖文本流元素） 2：多个元素添加浮动（外面需要一个父元素的存在，并且制定高度（否则需要清除浮动），而所有子元素都添加浮动形成一列） 3：浮动的子元素超过父元素的宽度的时候，被挤到下一行显示（从左开始再排序） 4：子元素添加浮动，而父元
浅谈BFC
刘运召的博客
01-03 584
一、什么是BFC BFC: 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分， 是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域 引用MDN 二、BFC生成条件 根元素() 浮动元素（元素的 float 不是 none） 绝对定位元素（元素的 position 为 absolute 或 fixed） o...
面试积累——BFC
Daisy花园
04-12 1634
什么是BFCBFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。BFC有一下特性： 内部的Box会在垂直方向，从顶部开始一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个B
3分钟理解BFC
猫老板的豆
05-28 708
简介 BFC(Block Formatting Context)块级格式化上下文，是用于布局块级盒子的一块渲染区域。 MDN上的解释：BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。 一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。 BFC的形成 根元素(即<html>标签) 浮动元素 float 不为 none （为 left、right）
什么是BFC? 怎么应用？
weixin_43758377的博客
10-27 567
BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。 Box：css布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定
BFC
李天下
06-16 924
1.BFC的概念 BFC（Block Formatting Context）：块级格式化上下文。你可以把它理解成一个独立的区域。 另外还有个概念叫IFC。不过，BFC问得更多。 2.BFC 的原理/BFC的布局规则【非常重要】 BFC 的原理，其实也就是 BFC 的渲染规则（能说出以下四点就够了）。包括： （1）BFC 内部的子元素，在垂直方向，边距会发生重叠。 （2）BFC在页面...
BFC原理与清除浮动的关系
liyang110703的博客
07-29 752
1. BFC（Block Formatting Context）     规定了块级盒子（block-level box）格式化的规则，是一个独立的渲染区域，且这个区域与外部不相关。 2. 哪些元素会生成BFC     根元素；float不等于none；position：absolute or fixed；display：inline-block, table-cell, table
CSS深度解析：BFC与Flex布局实战
本文主要探讨了两个关键的前端布局技术——Block Formatting Context (BFC) 和 Flexible Box (Flexbox)，并详细解释了它们的概念、触发条件以及在实际开发中的应用。 首先，我们来深入理解BFC（块级格式化上下文）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值