-
Box垂直方向的距离由
margin
决定,属于同一个BFC的两个相邻box的margin
会发生重叠-
应用:防止
marin
重叠 -
<style> .box1 { width: 200px;height: 200px; background-color: red; margin-bottom: 100px; } .box2 { width: 200px; height: 100px; background-color: orange; margin-top: 50px; } .fuqin{ /* 只要触发fuqin为BFC即可 */ float: left; } </style> <div class="box1"></div> <div class="fuqin"> <div class="box2"></div> </div> <!-- 1、不给box2添加fuqin的时候 此时box1和box2之间的垂直距离显示是100, 原因是因为box1和box2都在html里面, 而html是BFC, 也就是说box1和box2属于同一个BFC, 属于同一个BFC的2个相邻box的margin会发生重叠 2、解决方法 就是让box1和box2属于不同的BFC, 就不会发生重叠 当给下面的盒子添加了fuqin, 且给fuqin添加了overflow:hidden;之后, 就触发fuqin变成了BFC, 也就是说现在box1在html这个BFC里面, box2在fuqin这个BFC里面, 此时box1和box2属于不同的BFC, 那么他们的上下间距就不会重叠。 这时只是fuqin和box1在同一个bfc里面。 -->
-
-
BFC的区域不会与
float
box发生重叠-
应用:制作左边固定右边自适应的2栏布局
-
说明了为什么盒子都浮动之后会横着排
-
<style> .left{ width: 200px; height: 100px; background-color: yellow; /* left就是浮动盒子, 目前浮动盒子和right发生重叠了, 如果想要不重叠,可以触发right为BFC */ float: left; } .right{ width: 800px; height: 300px; background-color: orange; /* float: left; */ /* overflow: scroll; */ /* display: flex; */ /* position: absolute; */ } </style> <div class="left"></div> <div class="right"></div> <!-- 当给right添加了浮动之后, right就是BFC, BFC区域不会与浮动盒子发生重叠, 所以当多个盒子同时浮动了之后, 多个盒子会横着排列 给right用定位的时候注意: 定位之后, right只是层级关系在left上面, 类似于天与地的关系, 这并不是重叠了,视觉上只是right把left给覆盖了。 重叠的视觉效果是2个盒子有交叉 *** -->
-
-
计算BFC的高度时,浮动元素也参与计算
- 应用:清除内部浮动,解决高度塌陷
- 详见清除浮动7大方法
地址:清除浮动7大方法
-
BFC内部的box会在垂直方向,一个接一个的放置
- 注意,BFC只针对块级元素,所以行内元素还是横着排
<div>
、<p>
为什么竖着排?- 站在元素类型的角度,它们是块元素,块元素是竖着排的
- BFC角度:它们都在html里面,html是BFC,而BFC内部的Box会在垂直方向一个接一个的放置,所以竖着排
-
每个元素的
margin
box的左边会与包含块border
box的左边相接触(对于从左到右的格式化,否则相反),即使存在浮动也会如此- 说明了
margin-left
等的距离与父元素的边框没有关系,它是从边框里面开始计算距离的,更深度说明了边框是在盒子外面加的 - 即便存在浮动也不会影响
margin-left
- 说明了
-
BFC就是页面上的一个独立容器,容器里面的元素不会影响到外面的元素
BFC的特性与应用
最新推荐文章于 2024-08-28 23:58:56 发布