CSS学习（三）—— 浮动与定位

六、浮动与定位

1、浮动

1）浮动基本概念

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

浮动使用要点：如若要浮动，并排的盒子都要设置浮动；父盒子要有足够宽度，否则盒子会掉下去

浮动的顺序贴靠特性：子盒子会按照顺序进行贴靠，如果没有足够空间，则会再寻找前一个兄弟元素

浮动元素不再区分块级元素、行内元素，已经脱离了标准文档流，一定能设置宽高，即使他是span或者a标签

float:left; 左浮动，浮动元素统一按顺序向左靠

float:right; 右浮动，浮动元素统一按顺序向右靠

2）浮动实现网页布局

注意事项：

①垂直显示的盒子不要设置浮动，只有并排的盒子才需要浮动

②大盒子带着小盒子跑，在一个大盒子中，又是一个小天地，内部可以继续浮动

③不要节约盒子

④浮动不能继承

3）BFC规范和浏览器差异

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

一个盒子不设置height时，当内容元素都浮动时，无法撑起自身，故需要创建BFC来避免此种情况

如何创建BFC：

①大盒子float的值不是none

②position的值不是static或者relative（靠谱）

③display的值是inline-block、flex或者inline-flex

④overflow:hidden;（靠谱）

overflow:hidden;表示溢出隐藏，溢出盒子边框的内容将会被隐藏（溢出padding的部分还在），该方法是非常好用的让盒子形成BFC的办法

BFC的其他作用：

①可以取消盒子的margin塌陷；

②可以阻止元素被浮动元素覆盖。（仅做理论认识，实战不使用）

浏览器差异：

IE6、7浏览器使用haslayout机制，和BFC规范略有差异，比如IE浏览器使用zoom:1属性让盒子拥有layout。若要兼容至IE6、7的网页时，尽量让布局简单，内部有浮动的盒子时要设置height属性，规范编程。

4）清除浮动

清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响

如div父盒子未形成BFC，内部设置浮动盒子，此时父盒子没有height，由此导致与后面的另一个未形成BFC的没有height的父盒子重合，则后一个父盒子中的子盒子将与第一个父盒子中的子盒子并排

<!-- 示例 --><style>*{margin: 0;padding: 0;}p {margin-right: 20px;width: 100px;height: 100px;float: left;background-color: orange;}</style>
<body><div><p>1</p><p>2</p></div><div><p>3</p><p>4</p></div>
</body>

解决方法：

①让内部有浮动的父盒子形成BFC，他就能关住内部的浮动。此时最好的办法就是让父盒子增加overflow:hidden;属性（margin不失效）

②给后面的父盒子设置clear:both属性。clear表示清除浮动对自己的影响，both表示左右浮动都清除（该方法会导致后面父盒子的margin-top属性失效，因为上一个父盒子没有height，故不推荐该方法）

③使用::after伪元素给盒子添加最后一个子元素content=''，将其设置为块级元素display:block;（不转为块级元素则无效），并且给::after设置clear:both;（margin不失效）

④在两个父盒子之间“隔墙”，隔一个携带clear:both;的盒子（margin失效，但是可以通过给中间盒子设置height来替代margin）

5）浮动相关问题总结

★为什么要用浮动？

☆由于块级元素的特点是自动的垂直排列，所以想设置页面的布局只能通过浮动来实现。

★为什么要清除浮动？

☆盒子内部的浮动必须是独立的，也就是BFC，要是没有形成BFC，前面的盒子没有高度，就会导致后面的盒子不能正常的显示，所以我们必须要将浮动影响的范围锁在自己的父盒子之内。

★清除浮动有哪几种方式？优缺点是什么？

☆清除浮动有4种方式：

①是确保每一个盒子都形成BFC，这样的话每个盒子都有高度，设置margin也是水到渠成；

②是利用clear:both;属性来消除前后盒子对自己的影响，但是这样本盒子依然是没有高度的，所以不能使用margin属性来控制外边距；

③是在每个盒子的子元素的末尾里插入一个伪元素，给他设置clear:both;属性，这个子伪元素可以消除前后浮动对自己的影响从而消除对前后父元素的影响；

④是在两个父元素之间建一堵墙，边距都靠这个墙来控制。

★怎么根据场景选择清除浮动的方式？

☆一般情况，使用overflow:hidden能解决大多数浮动问题，如有overflow不能实现的效果时，可以考虑::after伪类选择器去清除浮动效果。

2、定位

1）相对定位

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

position:relative;
top:100px;
left:100px;
/* 盒子相对于自己原来的位置，left到左边的距离为100px，top到上边的距离为100px处x */

位置描述词：left到左边的距离；right到右边的距离；top到上边的距离；bottom到下边的距离

当出现left:100px; right:50px;这类冲突情况时，数值大的那个生效

relative可以和浮动一起使用

相对定位会在原来位置留有位置，新位置相当于原来位置的一个”影子“

用途：用来进行微调元素位置；也可以当作绝对定位的参考盒子

2）绝对定位

绝对定位：盒子可以在浏览器中以坐标进行位置的精准描述，拥有自己的绝对位置。

position:absolute;
top:100px;
left:100px;
/* 以网页边框为标准，以坐标进行位置确定，left到左边的距离为100px，top到上边的距离为100px处 */

位置描述词：left到左边的距离；right到右边的距离；top到上边的距离；bottom到下边的距离

绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖。

绝对定位的盒子并不是永远以浏览器为基准点。

绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当作基准点，这个盒子通常是相对定位（即有position:relative;）的，所以这个性质也叫”子绝父相“。

绝对定位盒子实现垂直居中：

position:absolute;
top:50%;
margin-top: 负的自己高度的一半;

设置完绝对定位后，不能再使用margin:0 auto;实现水平居中了，需要使用left:50%; margin-left:负的宽度的一半。

z-index属性：是一个没有单位的正整数，数值大的能够压住数值小的。

有经验的工程师往往会使用相同数字来定义z-index，如999|666、9999|6666、99999|66666等，通过位数来调整谁压住谁

绝对定位用途：用来制作”压盖“、”遮罩“效果；可以结合CSS精灵使用；可以结合JS实现动画

3）固定定位

固定定位：不管页面如何卷动，他永远固定在那里

position:fixed;
top:100px;
left:100px;

固定定位脱离标准文档流，只能以网页为参考系

用途：”返回顶部“、”楼层导航“、页面中不变的广告

脱离文档流方法：浮动、绝对定位、固定定位