CSS - 浮动布局（float）

小灰灰 2023-09-28 15:57 9阅读 0赞

**目录**

标准布局

标准流

浮动与浮动流，及元素脱标概念

浮动元素

浮动的特点

浮动带来的问题：标准流父级容器高度塌陷

清除浮动

浮动布局 + margin负值

--------------------

### 标准布局 ###

CSS将所有的元素都当成盒子，CSS布局其实就是如何堆放盒子。

在说浮动布局之前，我们需要了解标准布局，所谓标准布局，即按照元素在标准流中的特点布局

*  块级元素独占一行
 *  行内元素、行内块元素共享一行

这种布局方式中

*  块级元素很难被有效利用起来，因为其独占一行的特性，所以其只能进行垂直方向的布局
 *  行内元素、行内块元素可以进行水平方向布局，但是它们的内容大部分只能是文本，少量的如td中支持放入其他行内块元素，但是并不适合进行通用布局
 *  行内元素、行内块元素之间水平方向会因为代码空格，换行产生间隙，行内块元素垂直方向存在默认的baseline对齐底部间隙，这给水平布局带来额外的麻烦，而td不存在这些问题

所以，在标准布局时代，我们多基于table进行网页布局。但是table布局也有非常严重的缺点：

*  布局复杂
 *  布局一旦成型，很难变更
 *  渲染性能差

其实，本质上来看，标准布局的短板在于其水平方向上的布局只能使用行内、行内块元素，而行内、行内块元素由于各种问题，并不适用于布局，只适用于作为内容。

而块级元素并不存在行内和行内块元素的这些问题，所以如果块级元素也能用于水平方向布局，那么就完美了。

### 标准流 ###

标准布局中的元素处于标准流中。

我们可以暂且将标准流理解为PS中的图层。标准流就是网页最底层的图层。

### 浮动与浮动流，及元素脱标概念 ###

为了解决标准布局中，块级元素不能在水平方向布局的问题，即多个块级元素不能共享一行的问题，CSS提出了浮动的概念。

所谓浮动，即为元素设置float样式，float样式有如下值：

*  left 左浮动
 *  right 右浮动
 *  none 无浮动（元素默认浮动，无浮动）

一旦，元素设置了float:left或者float:right，则元素就会脱离标准流，简称“脱标”，然后进入浮动流。

所谓浮动流，我们可以理解其为处于标准流图层之上的另一个图层。

而一旦元素脱标后，元素就会释放其在标准流中的占据的位置，这将导致标准流中脱标元素之后的元素前据。

在浮动流中，多个块级元素是可以共享一行的

![8162ba39f470431a8f1e95c0fd1e450e.png][]

上例中，box1~box3设置了float:left，所以它们脱标进入浮动流，并共享一行，而box1~box3脱标后，它们在标准流中的位置就会被释放，此时box4这个依旧在标准流中的元素就会进据被释放的位置。

所以上例中，box4实际上有一部分被box1~bxo3遮盖住了，因为浮动流在标准流之上。

### 浮动元素 ###

一旦标准流中元素被加了float:left或float:right样式，则元素就变为了浮动元素，脱标进入浮动流。

浮动元素其实可以看成是：特殊的行内块元素，它具备行内块的部分特点

*  浮动元素之间共享一行
 *  浮动元素的width、height默认由元素内容决定，而不是由父级决定
 *  浮动元素支持通过width、height、padding、border、margin来指定盒子内容区、内外边距、边框大小
 *  浮动元素之间不会因为空格、换行产生空隙，浮动元素之间是紧密贴合的

标准流中的行内元素、行内块元素、块级元素加了浮动后，都会变成浮动元素，具备以上浮动元素的特性。

### 浮动的特点 ###

浮动方向？

*  垂直方向：向上浮动
 *  水平方向：如果float:left，则水平向左浮动，如果float:right，则水平向右浮动

浮动排列？

*  浮动元素之间紧密贴合，不会发生覆盖现象。
 *  如果目前顶部的行的剩余宽度不足以放下新的浮动元素，则新的浮动元素自动另起一行排列。

浮动范围？

浮动元素的浮动范围受到其父级元素，和兄弟元素的影响：

浮动元素的浮动范围只能在其父级元素内部（无论父级在标准流还是在浮动流），并且浮动元素不会压住父级元素的border、padding，父级元素content中的行内元素、行内块元素的内容会自动围绕浮动元素排列

![ca5da2635548408ca84a36837930d4a1.png][]

浮动元素本身就处于父级元素的content中，如果浮动元素存在兄弟元素：

如果兄弟元素也是浮动元素，则

> 前面的兄弟先浮动，后面的兄弟后浮动。
> 
> ![9c31cdb5012041b5a9a447900d71d829.png][]

如果兄弟元素是非浮动元素，则

> 浮动元素不会上浮压住前面的非浮动兄弟元素，
> 
> 而浮动元素脱标，会释放占据的标准流位置，所以浮动元素后面的非浮动兄弟会进据释放的位置，从而被浮动元素压住。
> 
> ![db4e0dacfb024ee3ae86b08b976a6bc3.png][]

总结：浮动元素只会影响浮动元素后面的标准流，不会影响前面的标准流

### 浮动带来的问题：标准流父级容器高度塌陷 ###

一般而言，我们不给标准流中父级容器设定height，而是让容器height自动适配为容器内容的高度，但是如果，此时有一个子级元素发生了浮动，则标准流中的父级容器的高度会发生塌陷

![ea886621afe74b678524002aa9a28653.png][]

原因是：标准流中父级容器的高度本来是由标准流中子级元素撑开的，但是当子级元素脱标后，对应标准流中的位置就会被释放，所以标准流中父级容器就没有内容了，此时父级容器的height就为0了。

### 清除浮动 ###

清除浮动是为了解决：当子级元素浮动后，其标准流中高度自适应的父容器高度塌陷问题

**方案1**：让标准流中父容器变为BFC模式，这样就可以保证父容器中子元素渲染不会影响外界了（即：不会引起父容器高度变化）

前面学习将元素转为BFC渲染模式的方式有：

*  元素变为浮动元素，即加float样式（非none）
 *  元素变为定位元素，即加position样式（值为absolute或fixed）
 *  元素变为弹性元素，即加display:flex
 *  元素加overflow样式（非visible）
 *  元素变为行内块显示模式

![0f9fd6401574400298f47e912606eed4.png][]

![00680974525c4fcda0786aefcafcc630.png][]

![63cb93275e03494685fe78599c8adf15.png][]

![6287a6f9b2b24af9b460d74e4d4f8eb7.png][]

**方案2**：利用clear样式来清除浮动引起的父容器高度塌陷

在学习clear样式清除浮动影响前，我们要先了解clear样式

首先：

> clear样式只能加给块级元素。对行内元素、行内块元素设置clear样式无效。
> 
> clear样式既可以加给浮动元素，也可以加给非浮动元素。

clear样式有三种常用值：

*  left
 *  right
 *  both

**如果给浮动元素加clear样式，则含义是：**

*  clear:left，表示保证当前元素左侧没有浮动元素
 *  clear:right，表示保证当前元素右侧没有浮动元素
 *  clear:both，表示保证当前元素两侧都没有浮动元素

![afc12a94838a4ccea9dc9a79181f89d1.png][]

box1,box2都是左浮动元素。

如果box2不加clear:left，理论上box1，box2应该左浮动到一行。

但是box2加了clear:left，所以要保证box2左侧无浮动元素，所以只能让box2换行排列。

![67ead19eb6244ccebcdf4542d0d2baf9.png][]box1是右浮动元素，box2是左浮动元素。

如果box2不加clear:right，则box1,box2应该在一行，并且box2在左侧，box1在右侧。

但是box2加了clear:right，所以要保证box2右侧无浮动元素，所以只能让box2换行排列。

![2025836141454b8898d808ddf11f0718.png][]

box1是右浮动元素，box2、box3是左浮动元素。

如果box3不加clear:both，则box1，box2,box3应该排列在一行。

但是box3加了clear:both，所以要保证box3两端无浮动元素，所以只能让box3换行。

另外，我们需要注意下面这种情况

![f5ff75c378fc493696dc2d6b6f3ed046.png][]

这里box1是右浮动元素 ,box2,box3是左浮动元素。

我们给box2加了clear:both，但是box2却依然和box3排列在一行，而没有保证box2右侧无浮动元素。

我个人理解原因应该是：浏览器按照从上到下顺序，依次渲染每个DOM元素的，当渲染到box2时，执行了clear:both，但是此时box2只有前面的box1右浮动元素，后面的box3还没有被渲染，所以此时clear:both只需要保证box2右侧无浮动元素即可，让其换行，然后clear:both工作结束。

之后，box3被渲染出来，进行左浮动。

所以我们应该将设置了clear样式的元素放在容器尾部。

**如果给非浮动元素加clear样式，则含义是：**

<table> 
 <tbody> 
  <tr> 
   <td>clear:left</td> 
   <td>清除当前元素前面的，左浮动元素脱标后带来的影响（高度塌陷）</td> 
  </tr> 
  <tr> 
   <td>clear:right</td> 
   <td>清除当前元素前面的，右浮动元素脱标后带来的影响（高度塌陷）</td> 
  </tr> 
  <tr> 
   <td>clear:both</td> 
   <td>清除当前元素前面的，左、右浮动元素脱标后带来的影响（高度塌陷）</td> 
  </tr> 
 </tbody> 
</table>

![ea0a532c78514d79aa847508d6a30eb5.png][]

![5b49b70cf46e4e9fb8bae08c51ea4087.png][]

可以发现，

非浮动元素上clear:left

*  只能清除左浮动元素带来的影响（父容器高度保持）
 *  不能清除右浮动元素带来的影响（父容器高度塌陷）

同理，非浮动元素上clear:right也是如此。

![bbd7aa75e1bb4d1e810fac5b5fb60121.png][]

![b3aa0d884b844a75a36eab0ef51bcbb9.png][]

而clear:both既可以清除左浮动元素脱标的影响，也可以清除右浮动元素脱标的影响。

另外需要注意的是，加了clear样式的元素只能清除位于它前面的浮动元素的影响，无法清除它后面的浮动元素的影响。

![69c39274056e4bb7b0689bd8b460c4cd.png][]

所以我们需要保证加了clear样式的元素在父容器尾部。

因此，为了清除浮动带来的父容器高度塌陷影响，我们可以使用如下方案：

**额外标签法**：在父容器内容最后新增一个块级标签，并为其设置clear:both

![eabccf541e534d12ad91084595db8139.png][]

**::after伪元素法**：为父容器新增一个::after伪元素，设置其显示模式为block，并为其设置clear:both

![ee3b746d73a04db59ad6b9966131a8c9.png][]

其中额外标签法会引入无关标签，破坏原有DOM结构，而::after伪元素法，不会引入无关标签，不会破坏DOM结构。

还有一种双伪元素法，即给父容器添加 ::before，::after伪元素，并在这两个伪元素上设置clear:both，以形成严格的浮动闭合。

但是我觉得有点多次一举了，因为clear:both只对它前面的浮动元素有效果，对后面的浮动元素无效果，所以::before伪元素清除浮动几乎没有任何效果。

### 浮动布局 + margin负值 ###

浮动布局最出名的就是：圣杯布局和双飞翼布局。

圣杯布局和双飞翼布局，都属于三栏式布局，且都是两侧边栏宽度固定，中间内容区宽度自适应。

目前来看实现起来非常容易，借助CSS的calc函数和浮动即可：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        html, body {
          margin: 0;
          padding: 0;
        }
    
        .container {
          width: 100%;
        }
    
        .container::after {
          content: "";
          display: block;
          clear: both;
        }
    
        .left-aside, .right-aside {
          width: 200px;
          height: 200px;
          float: left;
        }
    
        .left-aside {
          background-color: red;
        }
    
        .right-aside {
          background-color: blue;
        }
    
        .content {
          width: calc(100% - 400px);
          height: 200px;
          background-color: green;
          float: left;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="left-aside"></div>
        <div class="content"></div>
        <div class="right-aside"></div>
      </div>
    </body>
    </html>

![d62c5731d66f40e1a551577c0ddd6629.gif][]

但是圣杯和双飞翼都是上古时代的布局方式，那时候CSS还没有calc函数，所以实现起来要更加困难一点。

在上古时代，前端大能们巧妙地利用了margin负值来实现圣杯和双飞翼布局。

下面是圣杯布局的实现代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        html, body {
          margin: 0;
          padding: 0;
        }
    
        .container {
          padding: 0 200px; /* 预留出左右padding，给left-aside，right-aside */
        }
    
        .container::after {
          content: "";
          display: block;
          clear: both;
        }
    
        .left-aside, .right-aside {
          float: left;
          width: 200px;
          height: 200px;
        }
    
        .left-aside {
          background-color: red;
          margin-left: -200px; /* 左移200px */
        }
    
        .right-aside {
          background-color: blue;
          margin-right: -200px; /* 右移200px */
        }
    
        .content {
          float: left;
          width: 100%;
          height: 200px;
          background-color: green;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="left-aside"></div>
        <div class="content"></div>
        <div class="right-aside"></div>
      </div>
    </body>
    </html>

效果和上面calc函数实现的效果一致。

这里内容区宽度自适应的逻辑是：

父容器不设置宽度，但是设置左右padding，左右padding的大小等于侧边栏的固定宽度。

父容器的内容区的width占满剩余宽度，即100%。

![ee7c4afada594270ae9ac5f01b9904c7.png][]

![611d67833b4a44eabac301694f930466.png][]

然后我们先将红色的left-aside向左移动200px，即margin-left:-200px

![ca06f9c78b084568a3ea07c705291024.png][]

![c6f09bfde064465c8c80400d928d692e.png][]

此时，发生了两件事：

*  left-aside左移了200px
 *  **content 再次向上浮动了一行！！！！**

为什么content会再次向上浮动一行呢？

答案肯定是：顶部行的剩余宽度足够容纳content了

但是content宽度现在是是100%，自动占满剩余宽度，也就是说left-aside宽度为0了，content才有机会向上浮动一行。

那么为啥left-aside宽度为0呢？

其实这里说的left-aside宽度为0，

并不是指left-aside盒子的width为0，

而是指left-aside盒子的width+ 左右padding + 左右border + 左右margin = 0

有可能吗？

有，前面我们说过，margin和width、padding、border最大的区别在于：margin支持负值。

left-aside盒子的width+ 左右padding + 左右border + 左右margin = 0

是完全有可能的，我们看看当前left-aside盒子的实际数据：

*  width 值为200px
 *  左右padding 值为0
 *  左右border 值为0
 *  margin-left 值为 -200px，margin-right 值为0

则它们的和为0。

所以同理，我们设置right-aside盒子的margin-left或margin-right也为-200px，就能让right-aside盒子的整体宽度为0，然后right-aside盒子也能继续上浮。

假设，我们设置right-aside盒子的margin-left为-200px

![b5c1814a60144f858782c1cf7bcef533.png][]

![e49ce7668aa5426e8ee50ff2d4c537ed.png][]

发现出问题了，**蓝色的right-aside盒子虽然上浮了（因为整体宽度变为0），但是却没有覆盖父容器的padding-right区域，而是覆盖了content，这是为什么呢？**

我们可以看下right-aside的盒子模型

![0561c9da94254c8198ea8b5f23a2f509.png][]

可以发现盒子左侧margin-left:-200px和盒子内容width:200px抵消了

假设，right-aside盒子只margin-left:-199px，则此时right-aside盒子只被抵消了199px的盒子内容宽度，则还剩1px的内容宽度。

再假设，content所在行，还剩1px的剩余宽度，则right-aside盒子就可以上浮，并且肯定将自身1px有效区域放到content所在行剩余宽度1px中，而right-aside盒子其余199px无效区域只能覆盖在content身上。

![50330fd612cd4500901cbaa2e7342d90.png][]

上面都理解了的话，我们可以继续抽象出一个0px的有效区域，200px的无效区域的right-aside盒子 放入了 content所在行的剩余宽度0px中。

到此，就完成了right-aside盒子为啥margin-left:-200px后，会压在content盒子上了。

所以我们应该很容易理解right-aside盒子margin-right：-200px后的样子

![1535108ebdcf4b7fba6cfe22c4e67eb7.png][]

此时right-aside盒子的0px有效区域，被上浮到了content所在行的0px剩余宽度中，则right-aside盒子的200px无效区域自然被压倒了父容器padding-right区域。

下面是双飞翼布局的实现代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        html, body {
          margin: 0;
          padding: 0;
        }
    
        .container {
          float: left;
          width: 100%;
        }
    
        .container::after {
          content: "";
          display: block;
          clear: both;
        }
    
        .left-aside, .right-aside {
          float: left;
          width: 200px;
          height: 200px;
        }
    
        .left-aside {
          margin-left: -100%;
          background-color: red;
        }
    
        .right-aside {
          margin-left: -200px;
          background-color: blue;
        }
    
        .content {
          padding: 0 200px;
          height: 200px;
          background-color: green;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="content"></div>
      </div>
      <div class="left-aside"></div>
      <div class="right-aside"></div>
    </body>
    </html>

双飞翼布局和圣杯布局的表现效果相同，并且实现原理也一样，都是依赖于float + margin负值，二者的区别在于双飞翼的布局结构更复杂一点。

[8162ba39f470431a8f1e95c0fd1e450e.png]: https://img-blog.csdnimg.cn/8162ba39f470431a8f1e95c0fd1e450e.png
[ca5da2635548408ca84a36837930d4a1.png]: https://img-blog.csdnimg.cn/ca5da2635548408ca84a36837930d4a1.png
[9c31cdb5012041b5a9a447900d71d829.png]: https://img-blog.csdnimg.cn/9c31cdb5012041b5a9a447900d71d829.png
[db4e0dacfb024ee3ae86b08b976a6bc3.png]: https://img-blog.csdnimg.cn/db4e0dacfb024ee3ae86b08b976a6bc3.png
[ea886621afe74b678524002aa9a28653.png]: https://img-blog.csdnimg.cn/ea886621afe74b678524002aa9a28653.png
[0f9fd6401574400298f47e912606eed4.png]: https://img-blog.csdnimg.cn/0f9fd6401574400298f47e912606eed4.png
[00680974525c4fcda0786aefcafcc630.png]: https://img-blog.csdnimg.cn/00680974525c4fcda0786aefcafcc630.png
[63cb93275e03494685fe78599c8adf15.png]: https://img-blog.csdnimg.cn/63cb93275e03494685fe78599c8adf15.png
[6287a6f9b2b24af9b460d74e4d4f8eb7.png]: https://img-blog.csdnimg.cn/6287a6f9b2b24af9b460d74e4d4f8eb7.png
[afc12a94838a4ccea9dc9a79181f89d1.png]: https://img-blog.csdnimg.cn/afc12a94838a4ccea9dc9a79181f89d1.png
[67ead19eb6244ccebcdf4542d0d2baf9.png]: https://img-blog.csdnimg.cn/67ead19eb6244ccebcdf4542d0d2baf9.png
[2025836141454b8898d808ddf11f0718.png]: https://img-blog.csdnimg.cn/2025836141454b8898d808ddf11f0718.png
[f5ff75c378fc493696dc2d6b6f3ed046.png]: https://img-blog.csdnimg.cn/f5ff75c378fc493696dc2d6b6f3ed046.png
[ea0a532c78514d79aa847508d6a30eb5.png]: https://img-blog.csdnimg.cn/ea0a532c78514d79aa847508d6a30eb5.png
[5b49b70cf46e4e9fb8bae08c51ea4087.png]: https://img-blog.csdnimg.cn/5b49b70cf46e4e9fb8bae08c51ea4087.png
[bbd7aa75e1bb4d1e810fac5b5fb60121.png]: https://img-blog.csdnimg.cn/bbd7aa75e1bb4d1e810fac5b5fb60121.png
[b3aa0d884b844a75a36eab0ef51bcbb9.png]: https://img-blog.csdnimg.cn/b3aa0d884b844a75a36eab0ef51bcbb9.png
[69c39274056e4bb7b0689bd8b460c4cd.png]: https://img-blog.csdnimg.cn/69c39274056e4bb7b0689bd8b460c4cd.png
[eabccf541e534d12ad91084595db8139.png]: https://img-blog.csdnimg.cn/eabccf541e534d12ad91084595db8139.png
[ee3b746d73a04db59ad6b9966131a8c9.png]: https://img-blog.csdnimg.cn/ee3b746d73a04db59ad6b9966131a8c9.png
[d62c5731d66f40e1a551577c0ddd6629.gif]: https://img-blog.csdnimg.cn/d62c5731d66f40e1a551577c0ddd6629.gif
[ee7c4afada594270ae9ac5f01b9904c7.png]: https://img-blog.csdnimg.cn/ee7c4afada594270ae9ac5f01b9904c7.png
[611d67833b4a44eabac301694f930466.png]: https://img-blog.csdnimg.cn/611d67833b4a44eabac301694f930466.png
[ca06f9c78b084568a3ea07c705291024.png]: https://img-blog.csdnimg.cn/ca06f9c78b084568a3ea07c705291024.png
[c6f09bfde064465c8c80400d928d692e.png]: https://img-blog.csdnimg.cn/c6f09bfde064465c8c80400d928d692e.png
[b5c1814a60144f858782c1cf7bcef533.png]: https://img-blog.csdnimg.cn/b5c1814a60144f858782c1cf7bcef533.png
[e49ce7668aa5426e8ee50ff2d4c537ed.png]: https://img-blog.csdnimg.cn/e49ce7668aa5426e8ee50ff2d4c537ed.png
[0561c9da94254c8198ea8b5f23a2f509.png]: https://img-blog.csdnimg.cn/0561c9da94254c8198ea8b5f23a2f509.png
[50330fd612cd4500901cbaa2e7342d90.png]: https://img-blog.csdnimg.cn/50330fd612cd4500901cbaa2e7342d90.png
[1535108ebdcf4b7fba6cfe22c4e67eb7.png]: https://img-blog.csdnimg.cn/1535108ebdcf4b7fba6cfe22c4e67eb7.png