写在后面-对H5&CSS的补充
写在后面-对H5&CSS的补充
浅谈父元素高度塌陷问题
文档流
文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
元素在文档流中的特点：
块元素
块元素在文档流中会独占一行，块元素会自上向下排列。
块元素在文档流中默认宽度是父元素的100%
块元素在文档流中的高度默认被内容撑开
内联元素
- 内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
- 在文档流中，内联元素的宽度和高度默认都被内容撑开
浮动解释
块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，如果希望块元素在页面中水平排列，可以使块元素脱离文档流
使用float来使元素浮动，从而脱离文档流
可选值： none，默认值，元素默认在文档流中排列 left，元素会立即脱离文档流，向页面的左侧浮动 right，元素会立即脱离文档流，向页面的右侧浮动
注意：
- 当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
- 元素浮动以后，会尽量向页面的左上或这是右上漂浮，直到遇到父元素的边框或者其他的浮动元素
- 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
- 浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
- 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果
- 在文档流中，子元素的宽度默认占父元素的全部
- 当元素设置浮动以后，会完全脱离文档流，块元素脱离文档流以后，高度和宽度都被内容撑开
- 开启span的浮动，内联元素脱离文档流以后会变成块元素（内联元素本身设置宽高没有意义）
高度塌陷问题来由
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
解决高度塌陷
方法一
我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
方法二
根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context，简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
当开启元素的BFC以后，元素将会具有如下的特性：
父元素的垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC
设置元素浮动，使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
设置元素绝对定位
设置元素为inline-block，可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
将元素的overflow设置为一个非visible的值，此为推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题
开启方式很多，我们直接使用一种副作用最小的：
直接将元素的zoom设置为1即可
zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍 zoom:1 表示不放大元素，但是通过该样式可以开启hasLayout zoom这个样式，只在IE中支持，其他浏览器都不支持
方法三
清楚浮动介绍
我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
clear可以用来清除其他浮动元素对当前元素的影响
可选值：
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响
解法
可以直接在高度塌陷的父元素的最后，添加一个空白的div
由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，
基本没有副作用，使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
/*通过after伪类，选中box1的后边*/
/*
* 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
* 这样做和添加一个div的原理一样，可以达到一个相同的效果，
* 而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
*/
.clearfix::after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: table;
/*清除两侧的浮动*/
clear: both;
}
/*
* 在IE6中不支持after伪类,
* 所以在IE6中还需要使用hasLayout来处理
*/
.clearfix{
zoom:1;
}
定位问题再描述
Position
定位指的就是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素
通过position属性来设置元素的定位
可选值：
static：默认值，元素没有开启定位relative：开启元素的相对定位absolute：开启元素的绝对定位fixed：开启元素的固定定位（也是绝对定位的一种）
当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量
left：元素相对于其定位位置的左侧偏移量
right：元素相对于其定位位置的右侧偏移量
top：元素相对于其定位位置的上边的偏移量
bottom：元素相对于其定位位置下边的偏移量
通常偏移量只需要使用两个就可以对一个元素进行定位，一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
相对定位
当元素的position属性设置为relative时，则开启了元素的相对定位
当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
相对定位是相对于元素在文档流中原来自身的位置进行定位
相对定位的元素不会脱离文档流
相对定位会使元素提升一个层级
相对定位不会改变元素的性质，块还是块，内联还是内联
绝对定位
当position属性值设置为absolute时，则开启了元素的绝对定位
绝对定位：
开启绝对定位，会使元素脱离文档流
开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位），如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
绝对定位会使元素提升一个层级
绝对定位会改变元素的性质，内联元素变成块元素，块元素的宽度和高度默认都被内容撑开
固定定位
当元素的position属性设置fixed时，则开启了元素的固定定位
固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
不同的是：
固定定位永远都会相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
IE6不支持固定定位