外边距合并及破解方法

  • 同一个BFC中常规文档流的两个在垂直方向“相邻”的块级盒子会出现外边距合并。
  • 两个外边距都是正数时取其中最大的那个作为外边距；一正一负时则相加作为之间的外边距；都是负数时取其中绝对值较大的作为之间的外边距。
  • 创建新的BFC、脱离文档流、用bordr/padding将其分隔开。

去除inline-block内缝隙的几种常见方法

  • 相邻的标签不要有空格，可以把结束符放在下一行标签的前面；
  • 使用负margin，一般是margin: -4px;
  • 父容器设置font-size: 0，并重新设置子元素字体撑开高度；
  • 也可以用浮动代替inline-block，注意清除浮动。

父容器使用overflow: auto| hidden撑开高度的原理

  • 原本因浮动或定位导致的子元素与父容器不在同一个维度，因为使用overflow: auto| hidden后，父容器就形成了一个新的BFC，里面的布局不会受到外面元素的影响，BFC内的元素重新按顺序一个个排列，撑开高度。

BFC的形成及其作用

  • BFC是块级格式上下文，是一个独立的布局区间，其内部的元素排列不受外部元素影响。
  • 浮动、绝对定位、非块级盒子的块级容器（inline-block、table cell、table caption）以及overflow值不为visible的块级盒子都可以形成BFC。
  • 形成BFC就形成了一个独立的区间，不会受外部元素的影响；可以用来清除浮动造成的不良影响、去除外边距折叠。

浮动导致的父容器高度塌陷的原理及解决方法

  • 指的是因为子元素浮动，因而就脱离了文档流，未设置高度的父容器认为子元素不存在，所以父容器高度会坍塌，从而影响排版显示。
  • ①在浮动元素的后面加一个空元素并clear:both，虽然父容器无法感知浮动元素，但是空元素能告诉他高度应该撑到哪，用空div或空内容的：after都可以，注意display:block。
    ②可以用浮动、绝对定位、overflow：hidden/auto、display：inline-block等创建新的BFC，形成独立布局空间，让父元素感知浮动的子元素。

用伪类去撑开父容器高度（消除浮动影响）

1
2
3
4
5
6
7
8
.clearfix:after{
    content: '';
    display: block;
    clear: both;
}
.clearfix{
    *zoom: 1;
}
  • BFC是独立布局空间，不受外部元素影响，重新感知浮动的元素撑开空间；而空内容的伪类是以clear作为媒介，感知到浮动元素，再以自身为截止点让父容器撑开高度。