浮动（详解）

目录

1. 传统网页布局的三种方式

2. 标准流（普通流/文档流）

3.为什么需要浮动？

4. 什么是浮动？

5. 浮动的特性（重难点）

5.1 部分特性演示：

6. 浮动布局注意点

6.1 浮动元素和标准流父盒子搭配

6.2 一个元素浮动了，理论上其他的兄弟元素也要浮动

 7. 思考

---

1. 传统网页布局的三种方式

网页布局的本质——用 CSS 来摆放盒子，把盒子摆放到合适的位置。

CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

• 普通流（标准流） 
• 浮动
• 定位

2. 标准流（普通流/文档流）

所谓的标准流：根据标签元素的类型，按照规定的默认方式排列。

1. 块级元素会独占一行，按照从上向下顺序排列。

• 常用元素：div、hr、br、p、h1~h6、ul、ol、dl、form、table等

2. 行内元素，按照从左到右顺序排列，碰到父元素边缘则自动换行。

• 常用元素：span、a、i、em 等

以上都是标准流布局， 标准流是最基本的布局方式 。

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

注意： 实际开发中，一个页面基本都包含了这三种布局方式。

3.为什么需要浮动？

问题1  如何让多个块级盒子（div）水平排列成一行？（不用浮动）

 可以将子元素转换为行内块元素可以实现一行显示，但是子元素之间有很明显的空隙，如下所示：

问题2  如何实现两个盒子的左右对齐？

总结： 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式。

浮动最典型的应用：可以让多个块级元素一行内排列显示。

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

4. 什么是浮动？

float 属性用于创建浮动框，将其移动到一边，直到其左边缘或右边缘触及父级块元素的边缘或另一个浮动框的边缘。

 语法：

选择器 {float: 属性值;}

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

效果如下所示：（蓝色为背景）

此时父元素是块级，可见子元素1的左边缘和父级的左边缘对齐、2的右边缘与父级的右边缘对齐。

此时父元素是块级，可见子元素1的左边缘和父级的左边缘对齐、1的右边缘与2的左边缘对齐。

5. 浮动的特性（重难点）

元素加了浮动之后，会具有很多特性，需要掌握。

• 浮动的元素会脱离标准流（脱标），脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标，脱离具体规则）
• 浮动的元素会一行内显示且元素顶部对齐
• 浮动的元素具有行内块元素的特性
• 浮动的盒子不再保留原先的位置
• 如果块级子盒子没有设置宽度，默认宽度和父级一样宽，但是给其添加浮动后，它的大小根据内容来决定
• 浮动的盒子中间是没有缝隙的，是紧挨着的

5.1 部分特性演示：

1. 不再保留原先的位置，如下图所示：

 浮动的元素漂浮在标准流的上面，不占有原始位置，脱标。 

2. 如果多个盒子都设置了浮动，则它们会按照属性值 一行内显示并且顶端对齐排列 。如下图： 

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

父级装不下，如图所示：

为了约束浮动元素位置，网页布局一般采用的策略是：先用标准流的父元素上下排列，之后内部子元素采用浮动左右排列，符合网页布局第一准则。一句话概括：浮动元素经常和标准流的父级搭配使用。

网页布局第二准则：先设置盒子大小，之后设置盒子位置。

6. 浮动布局注意点

6.1 浮动元素和标准流父盒子搭配

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

6.2 一个元素浮动了，理论上其他的兄弟元素也要浮动

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止影响页面布局。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。 如下图所示：

1 和 3 都是标准流，2 是浮动元素，影响了3 , 3跑到2的下面，3的文字被挤了出来。并不会影响1。

 7. 思考

1. 前面浮动的元素都有一个标准流的父元素，他们有一个共同点，都有高度。但是所有的父盒子都必须有高度吗？

答：不必须。

2. 理想状态，让子盒子撑开父盒子，有多少子盒子，父盒子就有多大。但是不给父盒子高度会有问题吗？ 

答：会有问题，子盒子浮动后，父盒子高度为0，会影响后面的布局。解决办法：清除浮动。