触发BFC(触发bfc的方法)

bfc参照MDN的意思就是块级格式化上下文,简单来说bfc就相当于一个大盒子,区域内的一切元素怎样设置都不会影响外部元素。

常用触发条件如下:

1.浮动元素不为none;

2.position不为static;

3.display:inline-block;display:table-cell;display:table-caption;

4.overflow 计算值(Computed)不为 visible 的块元素

5.display:inline-flex;

bfc应用

解决margin塌陷问题

例如:

<style>
       *{margin:0;padding:0;}
     .list p{margin:20px auto;background:pink;}
</style>
<div class="list">
   <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
</div>

这种情况就会出现margin塌陷,简单来说就是外边距重叠了

解决这一问题的方法就是将发生重叠的盒子放在另外一个BFC容器中,添加一个父盒子,将该盒子设置为BFC容器

<div class="list">
 <p>Hello</p> 
 <div style="overflow:hidden">
      <p>Hello</p>
  </div>
    <p>Hello</p>
</div>

解决浮动问题

我们知道给父元素设置overflow:hidden可以清除子元素的浮动,但往往都不知道原理是什么,当然也是运用到了bfc原理,所以他内部的元素就不会影响外面的布局,BFC就把浮动的子元素高度当做了自己内部的高度去处理溢出,所以外面看起来是清除了浮动。

以下是清楚浮动的代码

.clearfix:after{
     content: ;
     display: block; /*或者 table*/
     clear: both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容*/
 }
版权声明:网站导航 发表于 2022年8月17日 上午6:36。
转载请注明:触发BFC(触发bfc的方法) | 网站导航

相关文章