margin塌陷、合并问题及BFC解决

痛定思痛。 2022-10-25 05:52 171阅读 0赞

## margin塌陷 ##

父子元素之间垂直方向的margin会粘合到一起，取最大的那个值  
![margin1][]

<table> 
 <thead> 
  <tr> 
   <th>解决方法</th> 
   <th>优缺点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>给父级设置边框或内边距</td> 
   <td>不建议使用,会破坏布局</td> 
  </tr> 
  <tr> 
   <td>bfc块级格式化上下文</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

## margin合并 ##

两个兄弟元素之间垂直方向的margin发生合并为高度中的较大者

<table> 
 <thead> 
  <tr> 
   <th>解决方法</th> 
   <th>优缺点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>给它们添加一个父级然后给父级使用bfc</td> 
   <td>不推荐使用,会破坏HTML文档结构</td> 
  </tr> 
  <tr> 
   <td>改变其中一个外边距的值，使之达到想要的效果</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

## BFC (块级格式化上下文) ##

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

##### 触发BFC： #####

<table> 
 <thead> 
  <tr> 
   <th>触发方法</th> 
   <th>语法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>给父级设置绝对定位</td> 
   <td>position: absolute</td> 
  </tr> 
  <tr> 
   <td>给父级设置行级块元素</td> 
   <td>display: inline-bolck</td> 
  </tr> 
  <tr> 
   <td>给父级设置设置浮动</td> 
   <td>float: left/right</td> 
  </tr> 
  <tr> 
   <td>给父级添加溢出隐藏</td> 
   <td>overflow: hidden</td> 
  </tr> 
 </tbody> 
</table>

通过bfc解决margin塌陷问题时会出现新的问题，解决方法并不完美，只能针对需求选择方法

##### BFC的三个特性： #####

*  阻止外边距折叠
 *  可以包含浮动的元素
 *  可以阻止元素被浮动元素覆盖

##### BFC应用： #####

*  清除浮动
 *  防止 margin 重叠
 *  多栏布局的一种方式

[margin1]: /images/20221024/256368e0072d40f2897b169e771e092e.png