浮动和定位

浮动元素

• 特征
  元素脱离正常的文档流，其他非浮动元素感知不到它的存在。但是浮动元素可以感知已经存在于文本框中的浮动元素和非浮动块级元素。可以移动到所在容器的的左端或者右端。其他的文本和行内元素围绕它安放
• 对父容器、其他浮动元素、普通元素、文字
  无法撑开父容器，如果父容器足够宽，与其他浮动元素会同一水平方向依次排列。此时浮动元素介于block和inline之间的状态。
  浮动元素之前的普通元素不受影响，之后的普通元素会感知不到浮动元素的存在，有可能会被浮动元素覆盖
  文字所在的行框因为浮动元素而缩短，实现文字环绕浮动元素的效果

清除浮动

指消除因浮动元素而造成的高度塌陷的问题。

1. clear消除
   clear指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。因此常用的方法是在父容器加一个类，使伪元素移动到浮动元素的下面，这样就能撑起父容器

.clearfix::after{
content: '';
display: block;
clear: both;
}

2. 使父容器形成BFC
   当一个元素形成BFC模式，则于外界其他元素没有影响了，最常用的方法是给父元素加一个overflow:hidden，但是这样会影响滚动条和绝对定位的元素
3. 对父容器设置高度
   只适用于已知高度的情况

定位

positon属性允许对元素进行定位

定位的属性

• static 默认值。位置设置为static的元素，它始终会处于文档流给予的位置
• inherit 规定应该从父元素继承 position 属性的值。但是任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 inherit
• fixed 生成绝对定位的元素。默认情况下，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置
• absolute 生成绝对定位的元素，相对于距该元素最近的已定位的祖先元素进行定位。
• relative 生成相对定位的元素，相对于该元素在文档中的初始位置进行定位

绝对定位和相对定位

• 相对定位可以看做是特殊的普通流定位，元素位置是相对于它在普通流中位置发生的变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位中的元素不存在一样
• 绝对定位的元素的位置是相对于位置距离较近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位
• 当设置子元素为绝对定位时，它就收缩为内容的宽度，因此要给它设置宽度和高度。那么，如果给它的宽度设置为 width:100% ，则它的宽度为就是父元素内容的宽度，这个时候就要考虑自己的 margin ，border和父元素的padding，否则会超出父元素的宽度
• 因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-idex属性控制叠放顺序，z-index 越高，元素位置越靠上

使用场景

• 相对定位：relative 通常和绝对定位结合使用
• 绝对定位：absolute 通常用于设置水平和垂直居中
• 固定定位：fixed适用于固定顶部导航条，广告弹窗等

z-index

• 作用：属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
• 使用方式：只有在使用了position并脱离了文档流（absolute、fixed）的情况下可以使用，其他情况使用z-index不起作用。