margin塌陷、合并问题及BFC解决

痛定思痛。 2022-10-25 05:52 237阅读 0赞

margin塌陷

父子元素之间垂直方向的margin会粘合到一起，取最大的那个值
margin1


















解决方法 优缺点
给父级设置边框或内边距 不建议使用,会破坏布局
bfc块级格式化上下文

margin合并

两个兄弟元素之间垂直方向的margin发生合并为高度中的较大者


















解决方法 优缺点
给它们添加一个父级然后给父级使用bfc 不推荐使用,会破坏HTML文档结构
改变其中一个外边距的值，使之达到想要的效果

BFC (块级格式化上下文)

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

触发BFC：

























触发方法 语法
给父级设置绝对定位 position: absolute
给父级设置行级块元素 display: inline-bolck
给父级设置设置浮动 float: left/right
给父级添加溢出隐藏 overflow: hidden

通过bfc解决margin塌陷问题时会出现新的问题，解决方法并不完美，只能针对需求选择方法

BFC的三个特性：
  • 阻止外边距折叠
  • 可以包含浮动的元素
  • 可以阻止元素被浮动元素覆盖
BFC应用：
  • 清除浮动
  • 防止 margin 重叠
  • 多栏布局的一种方式

发表评论

表情：
评论列表 （有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读