翻译自Chris Coyier博文 👉关于Float

Chris Coyier on Jul 8, 2009 (Updated on Mar 25, 2021)

什么是Float

Float是CSS的一个定位属性.我们可以通过打印设计来理解它的目的和起源。在打印布局中，图片需要被文字环绕着放置在页面中。这通常被叫做“文本环绕”，这有一个例子。截屏2022-07-14 下午5.31.38.png 在页面布局中，包含文本的盒子可以遵守文本环绕规则，也可以忽略它。忽略文本环绕会使文字分布在图片上，像图片不存在一样。图片是不是页面流的一部分的区分就在此。Web设计与之非常相似。

截屏2022-07-14 下午5.51.57.png

在网页设计中，应用了float属性的元素就像打印布局中被文本流环绕的图片。浮动元素是网页流的一部分。这和页面中的绝对定位元素绝对不同。绝对定位元素被移出网页流，类似打印布局中忽略文本环绕的文本框。绝对定位元素不会影响其他元素的布局，其他元素也不会影响他们，无论他们是否彼此接触。

可以像这样给元素的CSS设置浮动

#sidebar { 
    float: right; 
}

浮动属性有四个有效值。left和right分别设置元素向左/向右浮动。none(默认值)确保元素不浮动，inherit确保浮动属性值和父元素一样。

float的作用

除了简单的用文本环绕图片，float可以用来创建整个web布局。

截屏2022-07-14 下午5.53.42.png

⚠注意：尽管float能用于布局,但如今我们有了创建web页面布局更强大的工具,即flex和grid.了解float依旧很有用,因为它具有一些独特的能力,这篇文章里都有涵盖.

在少数场景下float对布局是有用的。比如一个web页面的这块小的区域。当我们在小矢量图上应用float时，图片尺寸改变，盒子里的文本会重新布局以适应。

截屏2022-07-14 下午5.55.23.png

这种布局也能通过相对定位的容器和绝对定位的矢量图实现。这样做的话，文本不受矢量图影响从而不能随尺寸改变而调整。

截屏2022-07-14 下午5.55.59.png

清除浮动

float的姐妹属性是clear。设置了clear属性的元素不会如float所愿上移到float邻近的地方，而是越过float移动到下面。我们再次用插图取代文字来更好地说明。

截屏2022-07-14 下午5.56.38.png

上述例子中，sidebar浮动到右边且比main content区域矮.根据float规则，footer需要向上移动到可用空间，footer可以通过被cleared确保自己待在两列float元素下面。

#footer {
    clear: both;
}

截屏2022-07-14 下午5.57.09.png

clear也有四个有效值。both最常用，它清除两侧的float。left和right分别清除左侧和右侧的float。none是默认值，一般是无用的除非从层叠中清除clear值。inherit是第四个值，但奇怪的是不被ie浏览器支持。清除左侧或右侧浮动虽然自然状态下很少见，但绝对有用。

截屏2022-07-14 下午5.57.34.png

严重塌陷

关于float让人迷惑的事情之一就是它对包含自己的容器(父级元素)的影响。如果父级元素只包含float元素，那么它的高度绝对不存在。这经常被忽视如果父级没有视觉上可见的背景的话，但这值得我们注意。

截屏2022-07-14 下午5.58.40.png

塌陷是如此反直觉,而我们的应对会更糟。考虑这样的场景。

截屏2022-07-14 下午5.59.11.png

如果上面的块元素要自动扩展以适应浮动元素，那么段落之间的文本流就会出现不自然的空间断层。这种情况下，我们设计师对塌陷行为的抱怨会更强烈。

我们总是需要处理塌陷来防止奇怪的布局和跨浏览器问题。我们通过在容器中的浮动元素之后，容器末尾之前清除浮动来解决这个问题。

清除浮动的技巧

如果你知道接下来的元素是什么，你可以给元素应用clear: both;并继续你的业务。这太理想化因为你要保证不会有意外打断，且没有其余元素从而保持完美的语义化。显然很难这样，所以我们需要更多清除浮动的方式。

空Div方法，也就是指一个空的div。

<div style="clear:both;"><div/>

也有人用br元素或其他任意的元素，但div最常见因为它没有浏览器默认样式，没有特殊职能，且不可能被类别样式化。此方法被追求语义化的人鄙视因为它的存在在页面中根本没有上下文意义只是纯粹为了展示。当然严格意义上说，这些人是对的，但这种方法达到了目的且没有造成任何伤害。

Overflow方法依靠在父元素上设置overflow属性。overflow设置成auto或hidden的父类元素将会扩展以包裹float元素，有效的为之后的元素清除了浮动。这种方法似乎不需要额外的元素，是完美的语义化的。然而如果你发现自己为使用这个方法添加了新的div，那么它就和空div方法一样是非语义化的，且更不适用。另外谨记overflow属性并不是专门用来清除浮动的。注意别把内容隐藏了，或者触发了不想要的滚动条。
简单的清除方法使用巧妙的CSS伪元素选择器(::after)来清除浮动。通过在类clearfix上应用它，而不是在父级上设置overflow。然后这样设置CSS：

.clearfix::after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

这会应用在父级元素之后，看不见的一小块内容上以清除浮动。到这并没有结束需要添加额外的代码来适应旧浏览器。（查看更多）

不同场景需要不同的清除浮动方法。比如不同类型块组成的grid布局。

截屏2022-07-14 下午6.02.37.png

为了视觉上更好的组织相似的块，我们想要在块颜色改变时换行。假设每个颜色的块组有一个父级容器，我们可以使用overflow法或简单清除法。或者，我们在每个组之间用空div法。事先不存在三个包裹div或事先不存在三个后面的div。你会自己决定哪种方法更好。

截屏2022-07-14 下午6.03.14.png

float的问题

float经常被脆弱性击倒。这种脆弱性大部分来自IE6和float相关bug的打击。由于越来越多的人放弃了IE6的支持，你或许不关心它，但对关心的人来说这里有一个简要的概述。

挤掉是指一个float项里的元素宽度超过float自身长度(一般是图片)。多数浏览器任由图片呈现在float外面但不允许伸出部分影响其他布局。IE会扩展float使它容纳图片，通常这会严重影响布局。常见的例子是一个图片超出主内容区，把sidebar挤到了下面。

截屏2022-07-14 下午6.03.38.png

双重margin问题——处理IE6你还需要记得当你在float上应用了同方向的margin，会有两个margin保留。快速修复：在float上设置display: inline，不要担心它仍会是块级元素。
3px轻推是指float元素下面紧邻的文本神秘地被踢到3px远好像float周围有一股怪力场。快速修复：给被影响文本设置一个宽度或高度。
在IE7中，下外边距bug是指当一个float的父级元素里面有float子元素时，子元素的下外边距被父元素忽略了。快速修复:用父级的bottom padding取代之。

关于Float你应该知道的