css布局中的BFC问题

1. 面试题—双边距(边距重叠)

  1. 什么是边距重叠?
  2. 什么情况下会发生边距重叠?
  3. 如何解决边距重叠?

边距重叠: 两个box如果都设置了边距,那么在垂直方向上,两个box的边距会发生重叠,以绝对值大的那个为最终结果显示在页面上。

有两种边距重叠的情况:

1. 父子关系的边距重叠

父子关系,如果子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距

在这里插入图片描述

给父元素添加 overflow:hidden
这样父元素就变为 BFC,不会随子元素产生外边距

在这里插入图片描述

<style>
.out {
background-color: #f00;
width: 200px;
height: 200px;
}

.inner{
margin-top: 50px;
width: 100px;
height: 100px;
background-color: blue;
}   
</style>
<div class="out">
    <div class="inner"></article>
</div>

2. 同级兄弟关系的重叠:

同级元素在垂直方向上外边距会出现重叠情况,最后外边距的大小取两者绝对值大的那个

在这里插入图片描述

  <style type="text/css">
            .fat {
                background-color: #ccc;
            }
            .fat .child-one {
                width: 100px;
                height: 100px;
                margin-bottom: 50px;
                background-color: #f00;
            }

            .fat .child-two {
                width: 100px;
                height: 100px;
                margin-top: 20px;
                background-color: #345890;
            }
        </style>
   <section class="fat">
        <div class="child-one"></div>
        <div class="child-two"></div>
    </section>

可通过添加空元素或伪类元素,设置overflow:hidden;解决margin重叠问题
在这里插入图片描述

2. 回答边距重叠—BFC

什么是BFC?

BFC就是“块级格式化上下文”的意思,BFC是一块独立的布局环境,保护其中内部元素不收外部影响,也不影响外部。本身BFC是一种css的布局方式,只是我们可以利用它来解决外边距折叠的问题,BFC并不是专门用来解决这个问题而创的;

如何触发BFC?

在box属性值为这些的情况下,都会让所属的box产生BFC。

  • overflow: auto/ hidden;
  • position: absolute/ fixed;
  • float: left/ right;
  • display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

也可以用排除法:

overflow的值不是visible;
position的值不是static或relative
float的值不是none
display的值是inline-block 或 table-cell 或 flex 或 table-caption 或
inline-flex

BFC的原理?(面试可不说,但要理解)

  1. BFC内部的盒子,会在垂直方向,一个接一个地放置。垂直方向上也会发生边距重叠。
  2. BFC就是页面上的一个独立容器,容器里面的子元素不会影响到外面的元素,外边的也不会影响里边的。
  3. BFC的区域不会与float重叠。
  4. 计算BFC的高度时,浮动元素也被计算在内。

BFC的应用

1. 可以用来自适应布局

利用BFC的这一个原理就可以实现两栏布局,左边定宽,右边自适应。不会相互影响,哪怕高度不相等。

在这里插入图片描述

给right加overflow:hidden;使其变成BFC,消除外部left因浮动对他的影响
在这里插入图片描述

<!-- BFC不与float重叠 -->
<section id="layout">
        <style media="screen">
          #layout{
            background: red;
            height: 200px;
          }
          #layout .left{
            float: left;
            width: 100px;
            height: 80px;
            background: blue;
          }
          #layout .right{
            height: 100px;
            background:green;
            overflow: hidden;
          }
        </style>
        <div class="left">left</div>
        <div class="right">right</div>
    </section>

2. 可以清除浮动:
在这里插入图片描述
父元素加overflow:hidden/auto,变BFC
在这里插入图片描述

<!-- BFC子元素即使是float也会参与计算 -->
      <style>
        #out{
          background: red;
          border: 1px solid black;
          overflow: hidden;
        }
        #inner{
          float: left;
           width: 200px;
           height: 200px;
           background-color: blue;
        }
      </style>
    <div id="out">
        <div id="inner">我是浮动元素</div>
    </div>

3. 解决垂直边距重叠:

见上方案例

  • 19
    点赞
  • 76
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

star@星空

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值