浮动与定位

浮动与定位

基础知识

浮动最本质的功能：用来实现并排

两个注意事项：

1. 所有的浮动元素都要加上 float:left。
2. 父盒子的width 需要大于 所有元素的width和 不然 元素会掉到下一行。

顺序贴靠特性：

如果没有足够空间，则会寻找再前一个兄弟元素贴靠。

浮动的元素一定设置宽高

即使是span标签或者a标签，因为其已经脱离文档流，不再区分 块级元素 还是 行内元素。

只有并排排的盒子才要设置浮动

大盒子带着小盒子跑。

大同与太原组成一个div， 保定和石家庄组成一个div 这两个大div 设置float即可。

BFC规范

BFC（Box Formatting Context,块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之亦然。

如何创建BFC：

1. 设置float。
2. position不是static或者relative。
3. display设为inline-block，flex或者inline-flex。
4. overflow:hidden;表示溢出隐藏，溢出盒子边框的内容将会被隐藏。

BFC的其他作用：

1. BFC可以取消盒子margin塌陷。
2. BFC可以阻止元素被浮动元素覆盖。

清除浮动的方法：

（盒子没有高的时候margin会失效）

1. 父元素设置overflow:hidden。（推荐）
2. 在第二个父元素设置clear:both，但是margin会失效。（不推荐）
3. 使用::after伪元素设置clear:both,display:block。（content=''）
4. 在两个父元素之间"隔墙"，墙设置clear:both。

相对定位

盒子相对自己原来的位置进行位置调整，称为相对定位。

相对定位的性质

1. 不脱离文档流，会在老家留坑，渲染的图形可以比喻成"影子"，不会对其他元素产生任何影响。

相对定位的用途：

1. 用来微调位置。
2. 当作绝对定位的参考盒子。

绝对定位

盒子可以再浏览器中以坐标进行位置的精准描述，拥有自己的绝对位置。
以top，left，bottom，right来描述坐标

绝对定位的性质

1. 绝对定位的元素会脱离文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对它们进行压盖。
2. 绝对定位的盒子并不是永远以浏览器作为基准点。
3. 绝对定位的盒子会以自己的祖先元素中，离自己最近的拥有定位属性的盒子做为基准点，这个性质也叫做 子绝父相。

绝对定位的盒子垂直居中

将margin-top设为-height/2
因为已经脱离文档流，所以margin不能auto来实现垂直居中。

z-index属性*

正整数，谁大谁再上面，谁优先级更高。