css元素背景小知识扩充

1,高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高

但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷

由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱

所以在开发中一定要避免出现高度塌陷的问题,

我们可以将父元素的高度写死，以避免塌陷的问题出现，

但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的

2,解决高度坍塌

根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context（块的格式化环境）简称BFC，该属性可以设置打开或者关闭，默认是关闭的

当开启元素的BFC以后，元素将会具有如下的特性：

a.父元素的垂直外边距不会和子元素重叠

b.开启BFC的元素不会被浮动元素所覆盖

c.开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC

aa.设置元素浮动

- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题

bb.设置元素绝对定位

cc.设置元素为inline-block

- 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式

dd.将元素的overflow设置为一个非visible的值

zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍

zoom:1表示不放大元素，但是通过该样式可以开启hasLayout

zoom这个样式，只在IE中支持，其他浏览器都不支持

3,清除浮动

none，默认值，不清除浮动

left，清除左侧浮动元素对当前元素的影响

right，清除右侧浮动元素对当前元素的影响

both，清除两侧浮动元素对当前元素的影响

清除对他影响最大的那个元素的浮动

4,定位

(1)定位：

- 定位指的就是将指定的元素摆放到页面的任意位置

通过定位可以任意的摆放元素

- 通过position属性来设置元素的定位

-可选值：

static：默认值，元素没有开启定位

relative：开启元素的相对定位

absolute：开启元素的绝对定位

fixed：开启元素的固定定位（也是绝对定位的一种）

(2)position: relative

当元素的position属性设置为relative时，则开启了元素的相对定位

当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化

相对定位是相对于元素在文档流中原来的位置进行定位

相对定位的元素不会脱离文档流

相对定位会使元素提升一个层级

相对定位不会改变元素的性质，块还是块，内联还是内联

(3)left:xxx px;

right:xxx px;

当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量

left：元素相对于其定位位置的左侧偏移量

right：元素相对于其定位位置的右侧偏移量

top：元素相对于其定位位置的上边的偏移量

bottom：元素相对于其定位位置下边的偏移量

通常偏移量只需要使用两个就可以对一个元素进行定位，

一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位