给子盒子设定边距父盒子也跟着移动的解决方法 ————BFC

最新推荐文章于 2022-12-01 23:42:22 发布

lyx9904

最新推荐文章于 2022-12-01 23:42:22 发布

阅读量692

点赞数

分类专栏：重学css3 文章标签： css

本文链接：https://blog.csdn.net/lyx9904/article/details/117448088

版权

重学css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天在写一个静态页面的时候，突然发现了一件神奇的事

在这里插入图片描述
先上代码

 <view class="baseinfo">
    <view class="infobox">
      <view class="lefticon"></view>
  <text class="title" >基本信息</text>
    </view>
 
</view>

.lefticon{
  width: 32rpx;
height: 26rpx;
border-radius: 0px 4rpx 4rpx 0px;
background: linear-gradient(#fede01 0%, #f6cb04 100%);

}

.title{
 
  font-family: "PingFang SC";
font-weight: 900;
font-size: 18px;
letter-spacing: 0;
/* line-height: 7px; */

color: #12181f;
}
.infobox{
  margin-top: 20rpx;
  display: flex;
  align-items: center;
}

.infobox原本是设置margin-top：20px
结果父盒子也跟着往下走了。

纳闷了一会，一开始还以为是display的问题，
后面突然一想，这不就是BFC的作用嘛

 <!-- 什么是BFC？ 独立渲染区域（直译为块级格式化上下文）
    他能解决什么问题？
    1）边距重叠问题（也可以通过只设置一个边距实现,中间添加一个p标签并设置BFC）
    2）盒子塌陷问题（也可以通过给父元素设置高度解决）
    3）清除浮动
    4）解决文字环绕的问题 -->
    <!-- 他怎么创建？
    1）float属性不为none
    2）position值为absolute，fixed
    3）display的值为inline-block，table-cell，flex
    4）overflow的值为hidden，scroll -->

    <!-- <div class="father">
        <div class="son"></div>
    </div> -->
    <!-- 如果给子元素设置外边距父元素也会跟着移动所以得把父元素设置为块级格式化上下文 -->