CSS - 浮动 float 与清除浮动

antipro7
107 阅读4分钟

**float  **浮动属性 是我们经常使用的一个 CSS 属性。在一些简单的布局时会经常看到它。而与之一起经常出现的是属性 clear ，为什么它们总是在一起呢？

浮动 Float

浮动的原始作用

看下 MDN 定义

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

总而言之

浮动属性 出现的原因就是用来实现让文字产生环绕效果

而我们经常用 float 来做超过它本职工作的事情，往往会产生一些问题。

浮动的特性

1. 浮动的包裹性

设置了浮动的元素，会具有类似 display: inline-block 的特性。称之为包裹性

设置 width, height 都会有效果（区别于行内元素），如果不设置的话，会自适应内容的大小（区别于块级元素）

float 无法等同于 inline-block，原因之一就是浮动的方向性，float 可以从右向左

2. 浮动的破坏性

一个元素浮动之后，它正常的文档流会被破坏，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到其他浮动元素。

又由于元素正常文档流被破坏，会导致高度也被破坏，没有了高度。所以浮动元素的父级会出现 高度坍塌

浮动 用在实现文字环绕时，并不会出现高度坍塌，是因为高度被环绕的文字撑起了。而我们用浮动去实现其他布局时，就会出现问题。

清除浮动-解决高度坍塌

clear 属性

MDN 上是这么定义 clear 属性的

clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。

可以看出 clear 属性是专门用来清除浮动的。那我们来看 clear 属性怎么使用。

举个栗子：

html 代码

<div class="content">
  <div class="left"></div>
  <div class="right"></div>
</div>
<div class="bot"></div>
<div class="footer"></div>

给 content 设置宽度600px，高度不设置，背景色黑色
left 宽度200，高度400，背景红色，左浮动。right 宽100，高300，蓝色，右浮动
bot 宽400，高50，footer 宽600，高100

布局如图：

可以发现，content 本该被内部撑起的高度没有了，没有黑色背景，高度坍塌了。

bot 和 footer 自动定位到上面来了

我们分别给 bot 设置三种 clear ，看下什么区别。

理解 clear 属性的定义，我们可以解释这三种情况

both: bot 移动到它之前浮动元素的下面，因为 bot 之前浮动元素有两个 left 和 right，最终位置会在所在位置最靠下的元素后面。

left: bot 移动到它之前浮动元素为左浮动的下面，所以排在 left 下面

right: bot 移动到它之前浮动元素为右浮动的下面，所以排在 right下面

虽然 bot 和 footer 已经回到了想要的目标位置，但是浮动导致 content 的高度坍塌并没有解决。很像治标不治本啊。

哥哥我发烧了！！！哥：洗个冷水澡，再出来量下体温！

ps: 如果将 clear 作用在浮动元素B上，会使该浮动元素B排在前面浮动元素A后面，并且B后面的浮动C，D...都无法高过B之前的元素

clearfix 方案

即 clear 一个不浮动的伪元素。加在高度坍塌的父元素上

.content::after {  
  content: "";
  display: block;
  clear: both;
}

为什么 clearfix 方案可以实现呢？

前文我们已经了解了 clear 属性的含义和用法，我们发现给 bot 使用 clear 属性时，bot 位置可以回到我们想要的位置，就是内部元素高度不见了，像是被什么力量给推了出来。那如果我们在父元素内部，浮动元素后面加个元素也 clear 一下，会不会撑起高度呢？

<div class="content">
  <div class="left"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>
// css
.clear {  clear: both;  }

我们在父元素 content 内部，浮动元素后面加了一个空的块级元素，并设置 clear。这样也能成功实现清除浮动的效果。

哇！！一下子我们就找到了解决方法！

clearfix 方案其实就是基于这个方案的优化，优化了这个舞无语义的空 div罢了

BFC 方案

触发了 BFC 的元素，在计算高度时，会把浮动的子元素的高度也计算进来，也实现了清除浮动导致的高度坍塌问题。

所以我们可以使高度坍塌的父元素 content 转变成 BFC。通过合适的属性即可，比如

.content {
  overflow: auto;
}

谢谢观看！菜鸟文章，欢迎指出问题，谢谢大家!

avatar
文章
阅读
粉丝