MrZhao's blog

# 5、CSS之margin重叠问题与BFC特性

# margin重叠问题

# 父子margin重叠

# 如果父元素有margin-top值

TIP

  • 1.子元素设置的margin-top如果比父元素的大，那么子元素设置的margin-top会直接替换掉父元素原来的margin-top而子元素与父元素之间的margin-top会被忽略掉；
  • 2.子元素设置的margin-top如果比父元素小，那么子元素设置的margin-top会直接被忽略掉，父元素依然有原来的margin-top值。

# 如果父元素没有margin-top值

TIP

那么子元素设置的margin值会直接应用到父元素上，子元素与父元素之间的margin-top会被直接忽略掉

解决办法：

  • 1，给父元素添加overflow: hidden;属性
  • 2，给父元素设置border属性
  • 3，给父元素设置padding-top: 0.1px;

就可以解决父子元素间的margin-top失效的问题

# 兄弟元素之间margin重叠

兄弟元素

margin-bottom和margin-top会自动的合并为两者中的最大值

解决办法：

  • 1，给其中一个元素设置 display:inline-block;
  • 2，给其中一个盒子外再包一层盒子，并给外面包的这层盒子设置overfolw：hidden，即触发盒子的bfc特性

# BFC特性:(块级格式化上下文)

BFC 俗称块级格式上下文，是一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。

# 创建 BFC 的方式

TIP

  • html 根元素
  • float 浮动
  • position 为 absolute或 fixed
  • overflow不为 visiable
  • display 为表格布局 或者 弹性布局

# BFC的特性

特性

  • BFC就是一个独立的容器，容器里的标签不会影响到外部标签

  • 外边距叠加 当两个相邻的标签在同一个BFC中时，它们之间垂直方向的外边距会发生重叠；

  • 不会重叠浮动元素 浮动元素的块级兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，为该兄弟元素添加 overflow：hidden ；*zoom:1; 触发BFC后可以阻止这种情况的发生。

    (*zoom:1是IEhack；因为 IE6-7 并不支持 W3C 的 BFC,而是使用私有属性 hasLayout )

  • BFC可以包含浮动元素，达到清除浮动的目的 给浮动元素的父亲元素设置 overflow：hidden； 使其父元素触发BFC属性来清除浮动，使得它可以包含浮动元素，从而防止出现高度塌陷的问题。

# BFC 主要的作用

# 外边距折叠问题：

TIP

父子嵌套标签垂直方向上的margin，margin会取其中最大值

解决方法

  • 1、给父元素增加border或者padding
  • 2、改变父元素的BFC渲染属性

# 浮动 导致父元素无法被撑开

TIP

标签浮动后脱离文档流，导致父元素无法被撑开

解决办法：

  • 1、改变父元素的BFC渲染属性，overflow: hidden;

# 浮动导致元素被覆盖

TIP

元素浮动后，会覆盖下一个兄弟元素，导致下一个兄弟元素被遮盖；

解决办法：

  • 1、改变下一个兄弟元素BFC属性；
上次更新: 4/15/2021, 8:54:26 PM

← 6、CSS伪类、伪元素 →