CSS页面布局之浮动/定位( 二 ) _CSS

height: 0;
clear: both;
visibility: hidden;
}
.clearfix{ /* 兼容IE6、7*/
*zoom: 1;
}
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、淘宝、网易等
（4）父级添加双伪元素
也是给父元素添加
.clearfix:before,.clearfix:after<{p> content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix<{p> *zoom: 1;
}
代码简单，但需要照顾低版本浏览器
代表网站：小米、腾讯等
3. 定位定位概念：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位 = 定位模式 + 边偏移
定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

position：静态定位
relative：相对定位
absolute：绝对定位
fixed：固定定位

边偏移
边偏移就是定位的盒子移动到最终位置，有top、bottom、left和right四个属性

文章插图
（1）静态定位：static
静态定位是元素的默认定位，就是元素没有开启定位的意思
语法：选择器{ position: static; }
特点：
静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到
（2）相对定位：relative
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
语法：选择器{ position: relative; }

文章插图
特点：

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
原来的标准流的位置继续占有，后面的盒子仍然以标准流的方式对待他（不脱标，继续保留原来位置）

1.开启元素的相对定位后，如果不设置偏移量元素不会发生任何变化
2.相对定位元素相对于其自身在文档流中的位置来定位
3.相对定位的元素不会脱离文档流，元素在文本流中的位置不会改变。
4.相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素
5.相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素。
（3）绝对定位：absolute
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
语法：选择器{ position: absolute; }

文章插图
绝对定位指使元素相对于html元素或离他最近的祖先定位元素进行定位。
• 当将position属性设置为absolute时，则开启了元素的绝对定位。
• 当开启了绝对定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。
特点：
1.元素设置绝对定位以后，如果不设置偏移量，元素的位置不会发生变化
2.绝对定位的元素是相对于距离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没开启定位，则相对于浏览器窗口body进行定位。
3.绝对定位的元素会完全脱离文档流
4.绝对定位会改变元素的性质。内联变块，块的高度和宽度都被内容撑开，并且不独占一行
5.绝对定位会使元素提升一个层级
口诀：子绝父相
意思就是子级是绝对定位，父级使用相对定位。
总结：因为父级需要占有位置，因此是相对定位；子盒子不需要占有位置，因此是绝对定位
（4）固定定位：fixed
固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时，元素的位置不会改变
语法：选择器{ position: fixed; }
特点：