我们在页面布局的时候，经常会出现以下情况：
- 这个元素高度怎么没了？
- 这两栏布局怎么没法自适应？
- 这两个元素的间距怎么有点奇怪的样子？
- 。。。
归根到底是元素之间的互相影响，导致了预期之外的情况的发生。这里就涉及到了BFC的概念
BFC的概念
BFC（Block formatting context）直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相干。
- BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定的规则进行物品摆放，并且不会影响其他环境中的物品。
- 如果一个元素符合出发BFC的条件，则BFC中的元素布局不受外部影响。
- 如果浮动元素会创建BFC，则浮动元素内部的子元素都受到该浮动元素的影响，所以浮动元素之间是互不影响的。
BFC的特性
- BFC是一个独立的容器，容器内子元素不会影响容器外的元素，反之亦是如此。
- 盒子从顶端开始垂直的一个一个的排列，盒子之间垂直的间距是由margin决定的。
- 在同一个BFC中，两个相邻的块级盒子的垂直外边距会发生重叠。
- BFC区域不会和float box发生重叠。
- BFC能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。
- 计算BFC的高度时，浮动元素也参与计算。
触发BFC
只要元素满足以下任意一种条件就可以触发BFC特性：
- body根元素
- 浮动元素：float除none以外的值
- 绝对定位元素：position（absolute、fixed）
- display为inline-block、table-cells、flex、inline-flex、table-caption
- overflow除了visible以外的值（hidden、auto、scroll）
BFC的应用
-
防止margin重叠（塌陷）
相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的垂直边距相遇时， 它们将形成一个外边距。这个外边距的高度等于两个发生折叠的外边距的高度中的较大者。
外边距折叠的条件是 margin 必须相邻!
<style type="text/css"> .box{ color: brown; background: rgb(226, 159, 108); width: 100px; height: 100px; text-align: center; line-height: 100px; margin: 100px; } </style> <body> <div class="box">上面</div> <div class="box">下面</div> </body>
两个box之间的距离为100px，发生了margin重叠（塌陷），解决这个问题，只需要把其中一个box变为BFC元素即可
<style type="text/css"> .box { color: brown; background: rgb(226, 159, 108); width: 100px; height: 100px; text-align: center; line-height: 100px; margin: 100px; } </style> <body> <div class="box">上面</div> <div style="overflow: hidden;"> <div class="box">下面</div> </div> </body>
-
清除内部浮动
- 浮动元素会脱离文档流(绝对定位元素也会脱离文档流)，导致无法计算准确的高度，这种问题称为高度塌陷。
- 解决高度塌陷问题的前提是能够识别并包含浮动元素，也就是清除浮动。
<style type="text/css"> .parent { width: 300px; border: 2px solid rgb(120, 201, 177); } .box { color: brown; background: rgb(226, 159, 108); width: 100px; height: 100px; text-align: center; line-height: 100px; float: left; } </style> <body> <div class="parent"> <div class="box">上面</div> <div class="box">下面</div> </div> </body>
如上左图所示，容器（parent）没有高度或者 height = auto ,并且其子元素（box）是浮动元素，所以该容器的高度是不会被撑开的，即高度塌陷。
解决方法：在容器（container）中创建 BFC。
<style type="text/css"> .parent { width: 300px; border: 2px solid rgb(120, 201, 177); overflow: hidden; } .box { color: brown; background: rgb(226, 159, 108); width: 100px; height: 100px; text-align: center; line-height: 100px; float: left; } </style> <body> <div class="parent"> <div class="box">上面</div> <div class="box">下面</div> </div> </body>
-
自适应多栏布局
<style type="text/css"> body{ width: 300px; } .aside { width: 100px; height: 150px; float: left; background: rgb(47, 187, 145); } .main { height: 200px; background: rgb(171, 75, 156); } </style> <body> <div class="aside">aside</div> <div class="main">main</div> </body>
这时候main元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可以通过触发
main生成BFC，以此适应两栏布局<style type="text/css"> body{ width: 300px; } .aside { width: 100px; height: 150px; float: left; background: rgb(47, 187, 145); } .main { height: 200px; overflow: hidden; background: rgb(171, 75, 156); } </style> <body> <div class="aside">aside</div> <div class="main">main</div> </body>
参考链接
zhuanlan.zhihu.com/p/25321647
segmentfault.com/a/119000001…
www.cnblogs.com/lhb25/p/ins…
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！