客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
前言 之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。 (参考来源 见文末的 Reference) 一 什么是 BFC 和之前所有博文一样，还是先从What的角度开始介绍，由浅入深的理解BFC。 所谓的 Formatting context(格式化上下文), 它是 W3C CSS2.1 规范中的一个概念。 它是页面中的一块渲染区域，并且有一套渲染规则. 它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 而 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则。通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素，反之也如此。 BFC的布局规则如下： 1 内部的盒子会在垂直方向，一个个地放置； 那么如何触发 BFC呢？只要元素满足下面任一条件即可触发 BFC 特性：
二 BFC的特性及应用 接下来介绍BFC常见的特性和应用，这一部分 在解释原因时，会用到上文的布局规则 和 触发条件，所以需要注意一下。 1 两个 相邻的普通流中的 块元素垂直方向上的 margin会折叠
<head>
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
}
</head>
<body>
<div class="p"></div>
<div class="p"></div>
</body>
效果图是： 根据BFC规则的第3条： 盒子垂直方向的距离由margin决定， 属于 同一个BFC的 + 两个相邻Box的 + 上下margin 会发生重叠。 上文的例子 之所以发生外边距折叠，是因为他们 同属于 body这个根元素， 所以我们需要让 它们 不属于同一个BFC，就能避免外边距折叠： <div class="p"></div> <div class="wrap"> <div class="p"></div> </div>
.wrap {
overflow:hidden;
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
效果图是： 2 BFC可以包含浮动的元素（清除浮动） 正常情况下，浮动的元素会脱离普通文档流，所以下面的代码里：
<div style="border: 1px solid #000;">
<div style="width: 50px; height: 50px; background: #eee;
float: left;">
</div>
</div>
外层的div会无法包含 内部浮动的div，效果见下图： 但如果我们 触发外部容器的BFC，根据BFC规范中的第4条：计算BFC的高度时，浮动元素也参与计算，那么外部div容器就可以包裹着浮动元素，所以只要把代码修改如下：
<div style="border: 1px solid #000;overflow: hidden">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
就可以完成以下效果： 3 BFC可以阻止元素被浮动元素覆盖 先看一个例子：
<div class="aside"></div>
<div class="main"></div>
div {
width:300px;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: black;
}
.main {
height:200px;
background-color:red;
}
效果图是： 之所以是这样，是因为上文的 规则5： 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此； 所以要想改变效果，使其互补干扰，就得利用规则6 ：BFC的区域不会与float重叠，让 <div class="main"> 也能触发BFC的性质，即：
.main {
overflow:hidden;
height:200px;
background-color:red;
}
通过这种方法，就能 用来实现 两列的自适应布局。 三 简要介绍IFC IFC布局规则： 1 框会从包含块的顶部开始，一个接一个地水平摆放。 2 摆放这些框时，它们在水平方向的 内外边距+边框 所占用的空间都会被考虑；在垂直方向上，这些框可能会以不同形式来对齐：水平的margin、padding、border有效，垂直无效。不能指定宽高; 3 行框的宽度是 由包含块和存在的浮动来决定;行框的高度 由行高来决定 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持极客世界。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论