12-浮动和定位

1-浮动
Float:值(none、left、right)
PS:
(1)-浮动说明：
(a)-浮动元素从正常流中删除
(b)-浮动元素会影响文档其余部分，比如文本环绕
(c)-浮动元素的外边距不合并
(d)-浮动元素，如果没有设置width且没有文本，则不会显示
(2)-浮动规则：浮动的元素会生成块级框。概括规则如下：
(a1)-浮动时，碰到“父元素内容 边界”、“其他浮动元素”
时停止；
(a2)-当浮动元素在水平方向放不下时，则会放在上一浮动元素的底端的下面。
(a3)-浮动元素最高不能高过父元素内容边界；
(a4)-也不能高过之前所有浮动元素;
(a5)-也不能高过之前的块级元素，放置时，通常放在上一块级元素框底端的下面，即使处于两个不浮动的块级元素之间，也是如此;
(a6)-行内元素浮动时，不能比该元素所在的行框还要高。
(3)-浮动的注意点：
(a)-浮动元素可能会超出父元素的下内边界，如要避免这种

情况，对父元素进行浮动即可。
(b)-浮动元素使用负外边距，可能会使内容看起来超出了父元素，但实际上元素框并没有超出父元素。如下图所示：

 

 

 

 

同时，当浮动元素与正常流中的元素重叠时，行内元素的所有属性和内容都显示在浮动元素之上，而块级元素除了内容显示在浮动元素之上，其余显示在下。如图：

 

 

 

2-清除浮动
Clear:值(none默认值、both、left、right)
PS:
(1)-应用于块级元素，行内元素无效。
(2)-原理：在清除元素上外边距之上增加清除区域(这个区域的高度的值是变化的)，然后加上清除元素的上外边距，使元素向下移，刚好元素边框在浮动元素下面。

3-position定位属性
Position:值(static、relative、absolute、fixed)
PS：
(1)-值：
(a)-static:静态定位，默认值
(b)-relative:相对定位
//特点：保留在文档流中的位置，相对原位置定位。
//包含块：和静态定位一样，元素的包含块是父元素的内容边界。
(c)- absolute：绝对定位
//特点：从文档流中删除，相对特定包含块定位。

//包含块：
当祖先元素都不是定位元素时，包含块是html，也就是相
对文档定位；
当祖先元素有定位元素时，包含块是最近的定位祖先元素的内边距边界以内的区域；
//注：其包含块一般使用position:relative值，因为相对定位元素比较稳定。
(d)-fixed:固定定位
//特点：从文档流中删除，相对浏览器窗口定位。
//包含块：可视窗口

4-偏移属性
Top(bottom、left、right):值(auto、长度单位、 %)
PS：
(1)-应用于定位元素
(2)-值：
(a)-长度单位：
//解释:top:50px，不是向上移动50像素，而是使用该属性后的定位元素的上边距边界向上移动50像素，可到达包含块的上边界。
其他方向的偏移属性解释同理。
(b)-%百分数值：top、bottom相对包含块的height，left、right相对包含块的width
(c)-auto:默认值
//解释：如，”top:auto”，表示定位元素的顶端和静态位置的顶端对齐。其他偏移属性解释同理。
(3)-绝对定位元素的位置和大小：
以水平方向为例(垂直方向原理相同)：

注：当同时设置了left和right的值时，定位时以left为准。Top和bottom同理。

说明：包含块width=800px,定位元素只设置left、right、margin-left、margin-right、width属性
序号	代码	解释
1	Left:auto; right:auto;  margin-left:auto ; margin-right:auto ; width:auto	Width伸缩到刚好包住内容，margin-left(right)重置为0，left置于静态位置，right补充剩下的像素

2	Left:0; right:auto;  margin-left:auto ; margin-right:auto ; width:auto	Width伸缩到刚好包住内容，margin-left(right)重置为0，left值为0，right补充剩下的像素
3	Left:100px; right:100px;  margin-left:50px ; margin-right:50px ; width:auto	当left、right都设置了值，而剩下的三个属性有两个auto(或三个auto)时，这行为和未定位时类似
4	Left:100px; right:100px;  margin-left:auto ; margin-right:50px ; width:auto
特列：对于设置了绝对定位的替换元素，如图像标签，width:auto不会伸缩，而width会计算成图像固有的宽度。这就相当图像元素设置了width一样，其他的原理和上述的情况都相同

 

5-Z-index叠放顺序
Z-index:数字
PS:
(1)-沿z轴叠放，数字越大越在上面，数字越小越在下面

(2)-图片解释：

 

规定，中间box2元素的子元素，不管设置了什么值，也不能放在box1下面、box3上面，只能放在box2上面，来决定彼此的叠放顺序，也就是说做为box2元素的子元素图片、段落，只能放在box2上面来决定图片、段落谁叠放在谁上面。
注：而绝对定位的元素就就摆脱了这些束缚，按数值排序。

 

6-最小最大属性
Min-width、min-height：0(默认值)、px、em、%(相对包含块的宽度、高度)
max-width、max-height：none(默认值)、 px、em、%(相对包含块的宽度、高度)
PS:
(1)-应用于块级元素、行内替换元素