css3基础100问之三大布局中浮动是怎样使用的呢？（7）

浮动(float)

咱们学过块级元素转化成行内块元素

效果如下：

但是块与块之间有默认的缝隙，，不知道几像素呀，那是不可以的哟，因为在实际设计中块与块之间的间距是确定的，还有有的是没有间隙的

如下图所示：（这是我截取的一些页面）

 所以说我们只能引入新的属性来进行设计网页。

下面是三种布局方式，咱们先讲关于浮动的知识点

CSS 布局的三种机制

> 网页布局的核心——就是**用 CSS 来摆放盒子**。

CSS 提供了 **3 种机制**来设置盒子的摆放位置，分别是**普通流**（标准流）、**浮动**和**定位**，其中： 

1. **普通流**（标准流）
   - **块级元素**会独占一行，**从上向下**顺序排列；
     - 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
   - **行内元素**会按照顺序，**从左到右**顺序排列，碰到父元素边缘则自动换行；
     - 常用元素：span、a、i、em等
2. **浮动**
   - 让盒子从普通流中**浮**起来,主要作用让多个块级盒子一行显示。
3. **定位**
   - 将盒子**定**在浏览器的某一个**位**置——CSS 离不开定位，特别是后面的 js 特效。

 

 

 

虽然我们前面学过行内块（inline-block） 但是他却有自己的缺陷：

1. 它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足以上第一个问题。
2. 它不能实现以上第二个问题，盒子左右对齐 

下面讲一下浮动的特性；

比如浮动加入之后，中间那个加了浮动的元素（人）就会能脱离普通流，

 

剩下的普通流就会代替她的位置，补上去：

 

下面举个具体的例子

比如下面这两个盒子，

代码已经下好了

如下图示：

 

下面第一个图是没有加入浮动的时候

是按照普通流来进行布局的

如下面所示：

当加入浮动之后：如下图：浮动的盒子脱标了，下面的就会占领它的位置，导致现在浮动的盒子在上面，标准流的盒子在下面

所以，box2下面的其实就是跑到box1盒子下面了， 被box1给压住了，遮挡起来了

 3). 浮动口诀之 特

浮动——特性  float属性会改变元素display属性。

任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 生成的块级框和我们前面的行内块极其相似。

没有加入浮动的时候：四个div是块级元素，按照一个占领一行排列，

加入浮动之后：

此时会排成一排，

如果我们缩小浏览器的页面大小，他会另起一行来进行排列。

继续缩小浏览器大小；

 

如果增加其中一个元素的高时，他们会按照上沿来进行水平排列

 

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

 

 

   总结：                    
| ---- | ----------------------------------------------------------- |
| 浮   | 加了浮动的盒子**是浮起来**的，漂浮在其他标准流盒子的上面。   |
| 漏   | 加了浮动的盒子**是不占位置的**，它原来的位置**漏给了标准流的盒子**。 |
| 特   | **特别注意**：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙 |

 浮动(float)的应用（重要）

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

我们知道，浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准流的影响。

> 一个完整的网页，是 标准流 +  浮动 +  我们后面要讲的定位 一起完成的。

下面我们做一个案例，下面小米框架是由一个大盒子里面装有两个左右两个小盒子，大盒子是标准流和两个小盒子使用浮动来进行的。

 不加入浮动时的代码

效果如下： 

 

当我加入浮动后：

效果如下：

  ​下面做一个案例：

这个页面一部分是怎样布局的呢？

我们通过分析，得到是由一个大盒子由四个小盒子组成的。

我们得到模型如下所示；

我们可以用两种方式来做

小米官方是用无序列表来做的：

每个小盒子之间有有一个短的间距如下所示： 

 我们量出来之后：是14像素：

加入代码右外边距为14px，如下图所示： 

效果出现下面所示：可是没有得到我们想要的结果，为什莫呢？ 

我们发现是最后一个是不需要右边距的 

我们清楚最后一个的右边距，目前可以有层叠性来做： 

css部分 

 

结果如下，还是没有得到想要的结果，怎末回事呢? 

我们检查元素可以看到最后一个的右边距不起作用的原因是并没有用成层叠性来进行改变，因为权重不及上面的，因此可以

改变权重来使其起到作用。 

 

 

改变权重后，最后的结果是： 

 

 

 

所以一定要注重权重的问题呢 

下面综合以下上面的两个案例：做成下面的这种布局方式：

 

 

 

右边八个小盒子之间的间距没有设置成？ 

 

加入左边距，这样不用考虑最右边的那个间距没有的问题了。 

 

 

但是上下也有间距啊。 

 

加入下边距后就可以解决这个问题了。 

 

 

可以自己操作一下做成下面网页的布局形式：