很多时候我们会在 Web 布局里看到 float，但它并不是为当代主流布局而设计的。理解它的机制后，才能避免常见的兼容和高度塌陷问题。

浮动

什么是浮动？

如果把一个元素设置为浮动，那么其他的内容就会围绕这个元素进行流动。

浮动元素会脱离正常的文档流，但是依然对布局有影响。

为什么使用浮动？

现实中的报刊，都会有图片被文字环绕。这种场景就特别适合使用浮动。

浮动API

浮动元素是相对于父级元素进行浮动的。

Name: float
Value: left | right | none | inherit
Initial: none

left

浮动元素会自动获得display:block属性并浮动在左边。

浮动元素会自动获得display:block属性并浮动在右边。

注意点

不管是什么元素，浮动后都会得到display:block块级框。因此没必要手动声明display:block。
多个浮动元素不会发生重叠
浮动元素比父级元素还要高，那么会影响它后面的元素
浮动元素会浮动到负外边距上，看上去比父元素更宽
如果浮动元素与内容重叠，那么内容都会在浮动元素之上渲染。
  • 行内元素：边框、背景、内容都会在浮动元素之上渲染。
  • 块级元素：边框、背景在浮动元素之下，内容在浮动元素之上渲染。

清除浮动

清除浮动是为了不让内容跟随浮动元素进行流动。

清除浮动API

Name: clear
Value: none | left | right | both | inherit
Initial: none

left

左边远离浮动元素

right

右边远离浮动元素

both

左右两边都远离浮动元素

注意点

clear的原理是增加元素的上外边距（margin-top），但很多时候我们不知道元素需要下移多少，因此会给浮动元素添加下边距。

实践

想要实现左右布局，就可以简单地使用float: right。

引用

https://drafts.csswg.org/css2/#propdef-float

https://drafts.csswg.org/css2/#propdef-clear

https://developer.mozilla.org/zh-CN/docs/Web/CSS/float

https://zh.learnlayout.com/