外边距的塌陷现象与BFC触发

最新推荐文章于 2023-09-16 13:28:25 发布

manchesitep

最新推荐文章于 2023-09-16 13:28:25 发布

阅读量398

点赞数 1

CC 4.0 BY-SA版权

分类专栏：初学面试文章标签： css html

本文链接：https://blog.youkuaiyun.com/manchesitep/article/details/115270784

初学同时被 2 个专栏收录

5 篇文章

订阅专栏

面试

4 篇文章

订阅专栏

文章目录

一、外边距的塌陷现象的原因
二、外边距塌陷的解决方案
总结

一、外边距的塌陷现象的原因

外边距塌陷产生有两种情况：
1.父子之间的塌陷
2.兄弟之间的塌陷

其原因是两元素之间的margin相接触

二、外边距塌陷的解决方案

1.父子之间

父子之间的外边距相接触之后就会塌缩；

解决方案

（1）使父元素触发bfc
（2）使用padding或border隔离父子元素的外边距

触发BFC

什么是bfc？

中文翻译为块格式化上下文
我理解的就是
当父元素触发BFC就可以理解为父元素这个盒子形成以一个独立的空间其内部不会受到外部影响。

例如

.main{
  width: 500px;
  height: 200px;
}
.partA{
  background-color: aquamarine;
  width: 100px;
  height: 100px;
  font-size: 40px;
  text-align: center;
  line-height: 100px;
  
  float: left;
}
.partB{
  background-color: burlywood;
  font-size: 40px;
  height: 200px;
  text-align: center;
  line-height: 200px;
}
</style>
<body>
  <div class="main"> 
    <div class="partA">A</div>
    <div class="partB">B</div>
  </div>
</body>

在这里插入图片描述

这里的A发生浮动脱离文本流。B受其影响。但若此时我们给B设置BFC（这里使用overflow：hidden）

.main{
  width: 500px;
  height: 200px;
}
.partA{
  background-color: aquamarine;
  width: 100px;
  height: 100px;
  font-size: 40px;
  text-align: center;
  line-height: 100px;
  
  float: left;
}
.partB{
  background-color: burlywood;
  font-size: 40px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  overflow: hidden;
}
</style>
<body>
  <div class="main"> 
    <div class="partA">A</div>
    <div class="partB">B</div>
  </div>
</body>

其结果为：
在这里插入图片描述

B形成了一个独立的空间不受A浮动的影响

触发BFC可以使用的命令

1.float;
float设置属性不为none都可以，但是会影响布局所以不常用。
2.position；
设置position不为absolute、fixed都可以触发bfc，但是这个也会对布局产生影响。
3.display；
display：table-cell、table-caption，inline-block，fixed，inline-flex
4.overflow；
不为visible都可以