日期：2021-01-20 类型：科技新闻 我要分享
关键词：小程序 活动，微信小程序demo，微信小程序游戏开发价格，手机小程序怎么做，视频播放微信小程序
1、普遍精准定位计划方案
在讲 BFC 以前，大家先来掌握1下普遍的精准定位计划方案，精准定位计划方案是操纵元素的合理布局，有3种普遍计划方案:
一般流 (normal flow)
在一般流中，元素依照其在 HTML 中的前后部位高于一切而下合理布局，在这个全过程中，行内元素水平排序，直至当行被占满随后换行，块级元素则会被3D渲染为详细的1个新行，除非此外特定，不然全部元素默认设置全是一般流精准定位，还可以说，一般流中元素的部位由该元素在 HTML 文本文档中的部位决策。
波动 (float)
在波动合理布局中，元素最先依照一般流的部位出現，随后依据波动的方位尽量的向左侧或右侧偏位，其实际效果与包装印刷排版中的文字围绕类似。
肯定精准定位 (absolute positioning)
在肯定精准定位合理布局中，元素会总体摆脱一般流，因而肯定精准定位元素不容易对其弟兄元素导致危害，而元素实际的部位由肯定精准定位的座标决策。
2、BFC 定义
Formatting context(文件格式化左右文) 是 W3C CSS2.1 标准中的1个定义。它是网页页面中的1块3D渲染地区，而且有1套3D渲染标准，它决策了其子元素将怎样精准定位，和和别的元素的关联和互相功效。
那末 BFC 是甚么呢？
BFC 即 Block Formatting Contexts (块级文件格式化左右文)，它属于上述精准定位计划方案的一般流。
具备 BFC 特点的元素能够看做是防护了的单独器皿，器皿里边的元素不容易在合理布局上危害到外面的元素，而且 BFC 具备一般器皿所沒有的1些特点。
通俗化1点来说，能够把 BFC 了解为1个封闭式的大箱子，箱子內部的元素不管怎样翻江搅海，都不容易危害到外界。
3、开启 BFC
要是元素考虑下面任1标准便可开启 BFC 特点：
4、BFC 特点及运用
1. 同1个 BFC 下外边距会产生折叠
<head>
div{
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
</head>
<body>
<div></div>
<div></div>
</body>
从实际效果上看，由于两个 div 元素都处在同1个 BFC 器皿下 (这里指 body 元素) 因此第1个 div 的下边距和第2个 div 的上边距产生了重合，因此两个盒子之间隔离仅有 100px，而并不是 200px。
最先这并不是 CSS 的 bug，大家能够了解为1种标准，假如要想防止外边距的重合，能够将其放在不一样的 BFC 器皿中。
<div class="container">
<p></p>
</div>
<div class="container">
<p></p>
</div>
.container {
overflow: hidden;
}
p {
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
这时候候，两个盒子边距就变为了 200px
2. BFC 能够包括波动的元素（消除波动）
大家都了解，波动的元素会摆脱一般文本文档流，看来下下面1个事例
<div style="border: 1px solid #000;">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
因为器皿内元素波动，摆脱了文本文档流，因此器皿只剩余 2px 的边距高宽比。假如使开启器皿的 BFC，那末器皿可能包裹着波动元素。
<div style="border: 1px solid #000;overflow: hidden">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
实际效果如图：
3. BFC 能够阻拦元素被波动元素遮盖
先看来1个文本围绕实际效果：
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是1个左波动的元素</div> <div style="width: 200px; height: 200px;background: #eee">我是1个沒有设定波动, 也沒有开启 BFC 元素, width: 200px; height:200px; background: #eee;</div>
这时候候实际上第2个元素有一部分被波动元素所遮盖，(可是文字信息内容不容易被波动元素所遮盖) 假如想防止元素被遮盖，可触第2个元素的 BFC 特点，在第2个元素中添加 overflow: hidden，就会变为：
这个方式能够用来完成多列自融入合理布局，实际效果非常好，这时候候左侧的宽度固定不动，右侧的內容自融入宽度(去掉上面右侧內容的宽度)。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 小程序 活动_微信小程序demo_微信小程序游戏开发价格_手机小程序怎么做_视频播放微信小程序 版权所有 （网站地图） 粤ICP备10235580号