失物不招领的前端学习日记（5）

浮动

1、浮动

1.1传统网页布局的三种方式：

1）普通流（标准流、文档流）：标签按照规定好默认方式排列。

1.2浮动作用：

浮动可以改变元素标签的默认排列方式。

注意：
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

1.3什么是浮动：

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘初级包含块或另一个浮动框的边缘。

语法：
选择器 { float：属性值；}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

eg.

eg.

1.4浮动特性：

1）、浮动元素会脱离标准流（脱标）

1.脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标。
2.浮动的盒子不再保留原先的位置。

eg.

2）、浮动元素会一行内显示并且元素顶部对齐

注意：
浮动的元素是互相贴靠在一起的（不会有缝隙），如果腹肌宽度装不下这些浮动的盒子，多出的盒子另起一行对齐。

eg.

3）、浮动元素会具有行内块元素的特性

eg.

1.5浮动元素经常和标准流父级搭配使用：

2、常见的网页布局

2.2浮动注意点：

1、浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。

1）如果一个盒子浮动了，那么其他兄弟也应该浮动。
2）浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的。
eg.

3、清除浮动

3.1清除浮动的本质：

语法：
选择器 {clear：属性值；}

清除浮动的策略：闭合浮动。

3.2清除浮动的方法：

1）、额外标签法

注意：新增盒子标签必须是块级元素。

eg.

2）、父级添加overflow

给父级添加overflow属性，将其属性值设置为hidden，auto或者scroll。

优点：代码简洁
缺点：无法显示溢出部分

eg.

3）、：after伪元素法

:after方式是额外标签法升级版，是给父元素添加。

语法：

4）、双伪元素清除浮动

给父元素添加。

语法：

4.CSS属性书写顺序