浮动

开发工具与关键技术：DW  CSS

作者：萧氏萧然

撰写时间：2020年10月 16日

什么是浮动

在了解什么是浮动之前我们先了解一下html元素在普通流排列方式。在普通流中，元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的，在排列过程中所有的行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为一整行。如果没有特殊样式指定，所有元素默认都是按照普通流方式排列布局，即普通流中元素的位置由该元素在 HTML 文档中的位置决定的。

浮动使元素脱离文档普通流，漂浮在普通流之上的。浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。浮动会产生块级框（相当于设置了display:block），而不管该元素本身是什么。

直接上例子：

首先来看第一个红色边框的大盒子

三个div普通块级元素独占一行即使宽度没占满行下一个块级元素也是直接开辟了另一行

第二个红色边框的大盒子

三个div原本是块级元素设置了个样式display:
inline;

使其变成了行内元素宽度和高度原本是和上面的小盒子一样的

由于行内元素无法自定义宽度和高度所以内容（内填充）多大宽高就多大

宽度满了一行就从下一行开始

第三个红色边框的大盒子 普通块级盒子是带有背景颜色的

来看一下布局：外面一个大盒子包裹着 6个同级小盒子

两个左浮动

两个普通块级盒子

一个右浮动

一个普通块级盒子

很明显看到前面两个块级盒子靠左并排显示

因为已经脱离的文档流所以和普通的盒子不在一个平面上

接着两个普通块级盒子，这里发现第一个普通块级盒子没有从第二行开始而实和浮动起来的

盒子相重合并且盒子里面的文字被挤到了第二行和第二个普通块级盒子的文本重合了

下面是一个右浮动原本是猜想从第二行开始浮动结果是直接另创一行

从第三行开始浮动

在下面就是一个普通的块级元素盒子和前面的浮动盒子在一行内

到这里相信都对浮动有了一定的了解

代码：