<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .father {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* margin: 100px; */
            /* overflow: hidden; */
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            margin-left: 45px;
            margin-top: 20px;
        }
    </style>
 <div class="father">
        <div class="son"></div>
    </div>

 已经对子盒子设置了margin-top但是没有下来

设置的margin-top也没有被划去,这时怎么回事呢?

BFC即Block Formatting Contexts (块级格式化上下文) , 它属于上述中的其中一种规范。

具有BFC特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面

的元素,并且BFC具有普通容器所没有的一些特性。

BFC特性:

1、内部的Box会在垂直方向,从顶部开始一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
3、每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box叠加。
5、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
6、计算BFC的高度时,浮动元素也参与计算。

如何触发BFC

 - float 除了none以外的值 overflow 除了visible 以外的值(hidden,auto,scroll )
 -  display (table-cell,table-caption,inline-block, flex, inline-flex)
 - position值为(absolute,fixed) fieldset元素
 - fieldset元素
在以上情况下可以创建BFC


BFC可以解决的问题
1、margin叠加的问题,我们将某个元素放到我们新建的BFC里面就可以避免margin叠加、
2、对于左右布局的元素,我们可以给右侧的元素添加overflow:hidden或者auto,左侧的是float:left
3、可以清除浮动,计算BFC高度,浮动元素不会撑开父元素的高度,我们可以让父元素触发BFC,即使用overflow:hidden 

 

给父盒子添加overflow:hidden

 

 


版权声明:本文为m0_61547956原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/m0_61547956/article/details/124368867