高度塌陷
父元素包含的子元素，子元素多高。父亲没指定，默认子元素高。
子元素设置浮动以后，子元素脱离文档流，此时子元素无法撑起父元素的高度，导致父元素的高度塌陷
我们可以将父元素的高度写死，避免塌陷
元素重叠，子父一起动。
解决高度塌陷
面试 开启BFC
特点
1 设置元素浮动 缺点宽度丢失 不推荐
2设置元素绝对定位 不推荐和1一样
3 设置元素为inline-block 缺点宽度丢失 也不推荐
4将元素的overflow设置为一个非visible的值 推荐
ie6以下不执行BFC。
（但是还有背的属性 haslayout（类似BFC））
（只是在ie里面支持）zoom：1；后面代表放大倍数。1是默认不放大。
所以默认这二个同时写。
ie6设置宽度了，在服务器端就不会踏。
清除浮动
.box1{
width: 100px;
height: 100px;
background-color: yellow;
/*设置box1向左浮动*/
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: yellowgreen;
box1影响box2上移，为了不影响浮动对当前元素产生的影响。
clear来完成功能
可选值：
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素的浮动
解决高度塌陷
可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的
.clear{
clear: both;
}
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动最推荐
after内联元素。伪类
.clearfix:after{
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
/*在ie6中不支持after伪类处理*/
.clearfix{
zoom: 1;
}
相对定位
相对定位元素，位置还有，不脱离文档流。所以块还是快，内联还是内联。position：relative。会提升一个层级。
相对自身的位置定位。
left: 100px;
top: 200px;
绝对定位。
position：absolute。
脱离文档流。
相对于离他最近开启定位的祖先元素。都没开就是浏览器左上角。
会提升一个层级。
内联变块，宽高有效，块变被内容撑开。
父元素开相对
子元素相对于父元素开绝对。
relative（必须有）
固定定位
static：默认值，元素没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）
固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
不同的是：
固定定位永远相对00
当滚动条动，他也不走。
fixed
网友评论