Float and Position(浮动与定位）

一、FLoat （浮动） 1.1 什么是浮动？ float属性用于创建浮动框，将其移到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘。 语法：

样例：

页面显示： 1.2 浮动的特性 （重难点）

1.3 如何约束浮动元素的位置 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。 样例1：

如图所示：

样例2：

显示样例：

1.4 浮动布局注意 （1）浮动和标准流的父盒子搭配 （2）一个元素浮动了，理论上其余的兄弟元素也要浮动 （浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流）。

1.5 清除浮动 （1）为什么需要清除浮动？ 由于父盒子在多数情况下不方便给高度，但子盒子浮动又不占有位置，最后父盒子高度为0时，影响下面的标准流盒子。 （2）清除浮动的本质 —— 清除浮动元素造成的影响 （清除浮动之后，父级会根据浮动的子盒子自动检测高度，从而不再影响下面的标准流） （3）语法：

策略 —— 闭合浮动 （4）清除浮动 —— 额外标签法（隔离法） 在浮动元素末尾添加一个空标签，或者其他标签 例如：

优点：通俗易懂，书写方便；缺点：结构化较差； 注意点：新的空标签必须是块级元素 (5)清除浮动 —— 父级添加overflow属性

注意：是给父级添加！！ （6）清除浮动 —— after伪元素法(父级添加）

(7)清除浮动 —— 双伪元素清除浮动

二、定位 2.1 为什么需要定位 定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子。 2.2 定位的组成 （1）定位:将盒子定在某个位置（即摆盒子） 定位 = 定位模式 + 边偏移 1.定位模式用于指定一个元素在文档中的定位方式，通过CSS的position属性来设置。

2.边偏移就是定位的盒子移动到最终位置。

2.3四类定位 （1）静态定位 static 静态定位是元素的默认定位方式，即无定位。 语法：

特点：无边偏移；少使用。

（2） 相对定位 relative 相对定位是元素在移动位置的时候，相对于它原来的位置来说的。（不脱标） 语法：

例子：

特点： 1.参照点是自己原来的位置； 2.原来在标准流的位置继续占有，后面的盒子任然以标准流的方式对待它。

(3) 绝对定位 absolute 绝对定位是元素在移动位置的时候，相对于它祖先元素来说的。（脱标） 语法：

特点： 1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。 2.如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素作为参考点移动位置。 3.绝对定位不占有原先的位置（脱标）。

（4） 固定定位 fixed 固定定位是元素固定于浏览器可视区的位置，即在浏览器滚动时元素的位置不会改变。 语法：

特点： 1.以浏览器的可视窗口为参照点移动元素； ●跟父元素没有任何关系； ●不能随滚动条滚动； 2.固定定位不再占有原先的位置； ●固定定位也是脱标的，可视为一种特殊的绝对定位。

小技巧——固定在版心右侧位置 使用算法： 1.让固定定位的盒子left：50%，走到浏览器可视区的一半位置； 2.让固定定位的盒子margin-left：版心宽度的一半距离。

页面显示：

plus1：子绝父相 子级是绝对定位的话，父级要使用相对定位。 ⭕子级绝对定位不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。 ⭕父盒子需要加定位限制盒子在父盒子内显示 ⭕父盒子布局时，需要占有位置，因此父亲只能是相对定位。

plus2：粘性定位 粘性定位可以被认为是相对定位和固定定位的混合。 语法：

特点： 1.以浏览器的可视窗口为参照点移动元素（固定定位的特点） 2.粘性定位占有原先的位置（相对定位的特点） 3.必须添加top，left，right，bottom其中一个才有效

2.4 定位叠放次序 z-index 在使用定位布局时，可能会出现盒子重叠的情况，则使用z-index来控制盒子的前后次序。 语法：

●数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上； ●如果属性值相同，则按照书写顺序，后来居上； ●数字后面不能加单位 ●只有定位的盒子才有z-index属性 例子：

plus3：定位特殊特性 1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度； 2.块级元素添加绝对或固定定位，如果不给宽度或者高度，默认大小是内容的大小。 3.绝对（固定）定位会完全压住盒子 浮动元素不同，只会压住它下面的标准流盒子，但是不会压住下面标准流盒子里面的文字（图片）。 绝对定位会压住下面标准流盒子的所有内容。

本博客写作参考黑马程序员pink老师，如有抄袭，深表歉意！