详解css中清除浮动的四种方式，float怎么用最合理

css基础篇（第四篇）

回顾

在上一讲中我们基本上学习了 css 中经典的塌陷问题以及 margin 和 padding 具体指的是什么和怎么合理运用，除此之外，在上一讲的最后我们还了解了圆角边框和盒子阴影，更能熟悉的学习对于盒子更多非常规的时候怎么去贴合业务。掌握基础是非常重要的，所以需要不停的学习和练习。

css布局的三种机制

在之前我们认识的都是css中按照正常流去布局的，正常流就是按照正常的逻辑从上到下，从左到右去布局，这次以及往后我们学习了浮动和定位之后你会发现，其实在日常的业务和工作当中按照正常的逻辑是行不通的，所以才会出现了浮动和定位等布局方式。三种常用的布局方式

• 普通流：块级元素，行内元素

• 浮动：让普通流浮动起来，主要作用就是让多个块级盒子一行展示

• 定位：将盒子定位在浏览器某一个位置，css离不开定位

什么是浮动&&为什么要浮动

• 什么是浮动：首先浮动就是让盒子或者元素脱离正常的标准流控制，你可以想象一下，元素本来在一个位置，加一个浮动它就会想云一样飘浮起来。进而移动到指定的位置。需要记住的是，如果元素或者盒子添加了浮动就不再占有本来的位置了。

• 为什么要浮动：主要作用就是让多个块级盒子在一行显示，如果是转换为行内快元素的话，可以将块级元素一行展示，但是中间有一个不可避免的缝隙。所以使用浮动是比较合理的。

浮动在css中：float

// float —— 浮动
float: none   元素不浮动（默认值）

// 元素向左浮动
float: left  元素向左浮动

// 元素向右浮动
float: right  元素向右浮动

浮动的口诀

在 float 浮动中必须得记住两个字：“浮”，“漏”。

浮

“浮”表示的就是当元素浮动之后是脱离正常的标准流的这个一定要记好，在往后的代码操作中非常重要。 如下图 1

  // 给最大的盒子设置浮动
  .father {
    float: left;
    width: 300px; height: 300px;
    background-color: pink;
  }
  .son {
    width: 200px; height: 200px;
    background-color: blue;
  }

在上述的代码中，我们将外层的 father 盒子设置了一个float: left 向左浮动，所以它就会浮起来不占有原来自己的位置，进而 son 盒子就会出现在father 盒子原来的位置，因为 father比son盒子大，如果小的话，就看不到浮动起来的盒子了。

漏

“漏” 表示在当前的元素浮动起来之后就不会再站有原来的位置了，要把下面的位置让给标准流。在上述的代码中就会出现这个问题。粉色浮动起来的盒子原来的位置已经让给了蓝色盒子了。

注意：还有一点需要注意的是，浮动的元素如果父级装不下的话，多余的盒子会另起一行对齐

浮动元素与兄弟盒子的关系

在浮动中还需要记住的是浮动元素只会影响当前或者后面的标准盒子，不会影响前面的标准流，相当于如果第一个盒子不浮动的话，那么后续的盒子浮动就会顶着第一个盒子。如下图 2

  .first {
    width: 200px; height: 200px;
    background-color: pink;
  }
  .second {
    float: right;
    width: 200px; height: 200px;
    background-color: red;
  }

在上图中可以发现，如果第一个盒子正常流，第二个盒子如果浮动的话，第一个盒子还是原来的保持块级元素占据一行，第二个盒子只会顶着第一个盒子的底部浮动。

清除浮动

清除浮动是为了解决父级元素因为子级浮动而引起的内部高度为0的问题。

什么时候清除浮动

• 父级没高度了
• 子盒子浮动了
• 浮动之后影响下面的布局了
  以上这些情况都需要清除浮动

注意：清除浮动之后，父级就会根据浮动的盒子自动检测高度，父级有了高度就不会影响下面的标准流了。

清除浮动语法 clear

• clear: left ———— 清除左侧浮动（几乎不用）
• clear: right ———— 清除右侧浮动（几乎不用）
• clear: left ———— 清除两侧浮动（重点用）

清除浮动的四种方式

1. 额外标签法：最后一个浮动标签末尾添加一个空标签

// 在最后一个浮动标签的末尾添加 如下 
<div class="clear"></div>

.clear {
  clear: both;
}

2. 父级添加overflow 属性方法

// 给父级的盒子添加 overflow：hidden；
<div class="father hidden"></div>

.hidden {
    overflow: hidden;
}

3. 使用 after 伪元素清除浮动（最常用，重点）

// 在父元素中添加 伪类元素清除浮动
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

注意：如果不了解伪类元素是什么的话，可以先把这种方式记下来，后续中我们自然会讲到伪元素。伪元素相当于额外空标签的升级版。

4. 使用双伪元素清除浮动

// 给父类添加一个 clearfix
.clearfix: before,
.clearfix: after {
    content: "";
    display: table
}
.clearfix: after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

以上就是清除浮动的四种方式了，可以下去自己在代码中练习练习，这四种方式第三种是非常常用的，在各大网站上都是高频的出现，暂时就不需要了解它的意思在后续的css中学完会逐个分析每句的意思。先学会使用就可。

ps切图

还有一点对于前端小白来说，在公司的整个结构中，前端人员免不了直接要和设计进行对接，所以了解 ps 也是相对重要的一环，这里就不在演示ps的具体操作了，不会的可以网上查一查日常常用的切图方法等。如果时间紧急也可以把重点放在css和js当中，在工作中学习ps也是可以的，学习 ps 会提升整个流程的效率。

总结

好了，这就是这一讲的全部内容了，这次的内容相对于之前不会太多，这一讲主要是 浮动和清除浮动的主要操作，虽然在后续的学习中我们会学习到 flex 布局，因为flex的出现，工作中浮动和清除浮动相对于当下不会太多的使用，但是对于css中最基础的东西还是需要学习和了解的。