CSS浮动

约 793 字大约 3 分钟

2022-04-12

提问

什么是 CSS 浮动？
浮动元素会带来哪些影响？
如何清除浮动？各自的优点？

什么是 CSS 浮动（float）

一开始引入 float 属性是为了让开发人员实现简单的布局，在一列文本中浮动的图像，文字环绕在它的左边或者右边。

但开发人员意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。

在早期，浮动可以用来实现整个网站的页面布局，因为浮动使得元素可以横向并列。

浮动元素带来哪些影响？

包裹性，自适应性；
- 如果浮动元素父元素宽度为300px，浮动元素不声明宽度，浮动元素子元素是一个200px的图片，则此时浮动元素的宽度表现为包裹，宽度就是子元素图片的宽度200px；
- 如果浮动元素子元素还包括大串文本内容，父元素不足以一行放下所有文本内容，则此时浮动元素则自适应父元素的宽度，宽度为父元素宽度。
块级化并格式化上下文
- 当一个元素的float属性值不为node，则其display计算值就是block或者table。
- 同时，该浮动元素也会产生一个格式化上下文
破坏文档
浮动元素会让其父元素的高度塌陷。在大多数场景下，这个特性会影响到正常的布局。
没有任何margin合并

清除浮动

clear属性

clear 属性的官方解释是：元素盒子的边不能和前面的浮动元素相邻。

用法：

clear: none | left | right | both;

使用：

在浮动元素后面插入空白块级元素，并声明 clear属性

<style>
  .float {
    float: left;
  }
  .clear {
    clear: both;
  }
</style>
<div>
  <div class="float">float</div>
  <div class="clear"></div>
</div>

使用伪类元素，并声明clear属性

<style>
  .float {
    float: left;
  }
  .clear::after {
    content: '';
    display: block;
    clear: both;
  }
</style>
<div class="clear">
  <div class="float">float</div>
</div>

创建BFC包裹浮动元素

创建BFC的方式比如：

浮动元素父元素设置 float 属性
浮动元素父元素设置 overflow 属性，且值为 auto、scroll 或 hidden
浮动元素父元素设置 position 属性，且值不为 relative或 static
浮动元素父元素设置 display 属性，且值为 inline-block、table-cell 或 table-caption

说明

float 属性，一开始的设计目的，仅仅是为文字和图片服务的，是为了实现文字的环绕效果。但是由于当年可用的布局手段很少，想要实现复杂的排版，大都依然<table>布局，后来发现给元素浮动后，可以像垒房子一样，把元素变成一块块砖搭建页面，float也被开发人员变成了一种网页布局手段。

在当下，网页可用的布局方式已经越来越丰富，比如 flex布局、Gird布局等，都比用float属性进行布局要更加强大。所以在当下，不推荐继续使用 float进行布局。

vue@3

vue@2

排序算法