文章转载自：css-tricks.com/all-about-f…
什么是浮动布局（floats）
Floats是CSS的定位属性。为了了解它存在的目的和起源，我们需要从印刷设计开始讲起。在印刷布局中，图片可能会被放在布局的一旁，而有需要的话周围的文字则环绕它。这就是字体环绕（换行），以下是一个例子。
在页面布局中，盒子里面的文本可以随着图片换行或者选择忽视它。忽视浮动的话，文字就会直接汇入图片所在的位置，就好像图片不存在一样。所以图片属不属于浮动布局的一部分会影响表现的形式。网页设计也是如此。
网页设计中，拥有float属性的页面元素的表现就好像印刷布局中的一样，文字会环绕包裹图片。浮动元素依然存在于网页文档流中。这跟绝对定位有着截然不同的表现。绝对定位的元素会被移出文档流，就好像是文本被设定成忽视图片的存在一样。绝对定位不会影响其他元素，反过来，其他元素也不会影响绝对定位元素，无论他们在布局上有没有相接。
我们只需要这样就可以把一个元素设定为浮动布局：
#sidebar { float: right; }
浮动属性有四个选值：left，right，none，inherit。left和right顾名思义就是设置浮动的方向。none则是不浮动，是属性的默认值。inherit则是让元素继承父级元素。
浮动布局有什么用
除了上面的关于文本环绕的简单例子外，浮动布局可以用来完成整个网页的布局。
虽然浮动布局依旧可以用来完成网页布局，但我们如今有更强大的方法来完成布局，例如flex和grid布局。但是了解浮动布局依然是有用的因为他们有一些非常有个性的特性，在这篇文章中都会被提及。
浮动布局在小的示例上依旧是有用的。让我们用网页的一小块来当例子。如果我们使用浮动布局作为头像的定位方法。那么当图片大小改变时，环绕的文字也会随着改变重流。但如果我们使用绝对定位+padding的方式的话，那么右边的文字不会随着图片的大小而改变。
清除浮动
float的另一个共同使用的元素是clear，清除了浮动的元素，邻接float元素的时候，也不会跟随float元素的设定，而是移出float流，就像是普通的元素，我们还是看看例子吧。
上面的例子，sidebar是向右浮动的，但他的高度比左边的main content area要小，所以footer元素就会紧跟其后，如果后面有它足够的空间的话。为了解决这个问题，我们可以清除footer的浮动让他留在底下。
clear有五个可选值：both，left，right，none和inherit，both是最为常用的，left和right只能清除他们所指定的方向。none则是默认设置，一般是非必要的除非想清除clear被设定的值。只清除左边或右边听起来没什么用，但在某些方面上，他们存在则合理。
高度塌陷
处理浮动布局一个最让人困惑的地方就是他们如何影响包含他们的元素（也就是父元素）。如果父元素只含有浮动元素的话，他的高度就会塌陷到0。这个并不明显除非父级元素设置了背景元素。但它不容忽视。
尽管它听起来很反常识，但另一个可供选择的方案则更差。考虑以下情况。
如果上层块级元素自动地撑开高度去适应浮动元素的话，我们在文本流将会有一个不连续的、突兀的空白，并且没有任何方法去修正。如果情况是这样的话，相较于高度他乡，设计师会抱怨更多。 如果我们要避免布局错乱和兼容浏览器，高度塌陷是我们不得不去处理的一个问题。
清除浮动的技巧
如果你有自信知道邻接float元素的元素会怎么表现的话，你可以使用clear:both;来完成你的设计。这是一个理想的选项因为它不需要什么奇特的hack技巧并且不会新增一些无意义的属性。当然事情不会如我们预想那般理想化，有的时候我们需要使用别的方法来清除浮动。
- 空div元素方法 是，字面意思上看，就是一个空的div，
<div style="clear:both;"></div>有时你则会看到<br>标签或者其他任何标签。但div时最常用的，因为它没有任何默认的浏览器样式，没有任何默认的浏览器行为，而且也不太会被其他的CSS设定影响到。这个方法被语义信徒给摒弃了，因为他们认为不应该在页面添加任何无意义的标签。严格来说，他们是对的，但这个方法完成了工作而且没伤害到谁。 - overflow方法则是将父级元素设置overflow的值。如果这个被设置为auto或者hidden，父级元素则会撑开float元素。这个方法在语义上依旧是优美的，因为他没有增加新的元素，然而当你发现你为了增加一个新的div只是为了可以在上面添加这个元素，你会发现你依旧增加了一个无意义的元素。同时留意，设置overflow不单是清除了元素，同时也会触发滚动条之类的。
- 最简单的clearing方法 是使用一个聪明的css后缀选择器
:after来清除元素，与其在父级元素上设置overflow值，不如在父级元素设置一个额外的clearfix类。
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
这个会给内容带了小小的改变，并且在视图上根本看不出来，但在旧的浏览器上会有兼容的问题，需要进一步处理。 不同的场景使用不同的清除方法，例如下面的例子。
为了在视觉上区分相同的元素，我们会另起一行，将相同颜色的元素放在同一行。我们可以使用overflow或者clear属性，如果每组元素都有他们的父元素的话。或者我们会在每组元素之间，插入一个空div元素。三个在这之前不存在的包裹div或者三个在这之前不存的的插入div。供读者自行选择。
浮动元素存在的问题
浮动元素被诟病的就是脆弱。最主要的脆弱性就是IE6的兼容和一些float本身的小bug。越来越多的设计师开始放弃支持IE6，你可能不在意，但对在意的人们，我们有如下的方法：
- 溢出是一个经典的float元素问题，当内部的元素大于float元素时，宽度则会溢出，而不是影响整体布局。IE则会撑开宽度。一个典型的例子就是图片撑开，导致sidebar往下移动。
- 边距重叠问题 另一个关于IE6的问题就是高度重叠问题，如果你在float元素上设置了相同方向的margin的话，就会出现双倍的边距。解决方法：设置
display:inline;，并且不用担心它会变成inline元素。 - 3px jog 紧接着float元素的文本，会有个神奇的3px的边距。解决方法：给文本设置宽度或者高度。
- IE7 底部边距问题 当一个浮动的父级拥有浮动的子元素时，下边距会被父级元素忽略，解决放啊：使用下内边距。
其他
如果你需要文本环绕着图片，除了float以外没有别的解决方法。讲到这个，不如看看这个关于“如何把文字环绕不规则的形状”的文章看看。但对于页面布局，绝对有其他更好的选择。
