9 个回答
陌路凡歌
  • 7.8k
✓ 已被采纳

设置了的overflow属性的盒模型,是和其子元素之间的垂直margin不会合并,但其与父元素之间、与相邻元素之间的margin会合并
设置了display:inline-block或float:left或position:absolute的相邻元素之间margin不会合并

BFC触发的是内部隔离,也就是box1内部的和box2内部的不会再进行外边距折叠,但是box1和box2此时还是处于同一个容器,如果要利用bfc实现你要的目的 应该是给box1或者box2(当然两个都加也可以)外面加上一层容器,然后让这层容器触发bfc

zickson
  • 2
新手上路,请多包涵

这些答案就没有一个贴切问题的,甚至根本都不知道人家在问啥。。。
只有 陌路凡歌 回答了一下表面现象

楼主明显是受到了一些博客中对于BFC描述用词并不准确的影响...
如一些博客中描述会生成BFC的情况:
哪些元素会生成BFC?
根元素
1、float属性不为none
2、position为absolute或fixed
3、display为inline-block, table-cell, table-caption, flex, inline-flex
4、overflow不为visible

试着解答LZ的疑惑
原因1:
“生成BFC”————这句话本身就不对,准确来讲应该是生成新的BFC,不同BFC之间毗邻margin才不会合并。
并且一个元素,比如元素A,通过这些css属性生成了新BFC,作用的不是A元素自身,而是其内部环境。
即A元素的所有子元素都是新的BFC,A元素本身还是原来的BFC,自然会和同级的相同BFC的兄弟元素毗邻margin进行合并

原因2:LZ的例子里,如果把box1的overflow: hidden属性替换成display: inline-block, 不用建立子元素,box1和box2的margin就不合并了,LZ肯定疑惑过这一点才上来提问。因为明明都是创建新BFC来防止margin合并,为啥overflow: hidden和display:inline-block效果不一样,后者可以少套一层?
原因是类型转换为inline-block时其实已经归属于行框模型,这就牵扯到另一个IFC的概念。整个行框模型是不存在margin合并的,生成的新BFC可以看做是行框模型生成了BFC,此时box1已经作为行框模型内部的一个子元素了。。。

再见尼克
  • 905

当 box 的大小是固定的,而且当 content 内容变多,多到 box 不能容下的时候,也就是溢出(overflow)的时候,才是overflow这个属性才有发挥价值的时候。

overflow一共有三个值可以设定
auto: 自动隐藏溢出部分,而且显示scroll bar用于控制显示
hidden: 也就是题主用的这种,直接隐藏,没有 scroll bar
visible: 默认情况,直接显示溢出部分

这是overflow的一般使用场景。

题主给出的例子,box1 和 box2 均没有发生溢出,所以overflow的区别也没有显示出来。
题主是否遗漏了其他说明信息?或者具体描述一下使用场景和目的?

看不懂你的问题,overflow hidden 是限制子div的范围,超出范围隐藏

kitety
  • 29

两个并列的盒子,关于他们的外边距,两者中取一个,而且是较大的一个.如果两个外边距,他们就重合了.
图片如下.希望可以理解.
图片描述图片描述

overflow可以解决处理浮动问题,你可能是弄错了。
margin是属于盒子模型,相邻的盒子在上下排布时外边距以大的为主,这是css排布问题,你可以查看下css属性。

1.通过BFC 阻止外边距合并,条件是他们属于不同的BFC,他们之间的上下边距才不会合并;
而此时 box1 和box2还属于同一个 BFC, 毗邻盒子的垂直外边距折叠只有在同一个BFC时才会发生;
2.解决方法:
box2用div 包括,并设置overflow:hidden;

宣传栏