inline-block、BFC、边距合并

外边距合并及破解方法

  • 同一个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,形成独立布局空间,让父元素感知浮动的子元素。

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

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

你可能感兴趣的:(inline-block、BFC、边距合并)