开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第十七天,点击查看活动详情

深入解析CSS(第五天)

了解浮动

浮动布局在过去或许是特别特别常见的一种方式,当你去看很多网站都会发现他们都用到了float布局,但是float最初设计并不是为了页面布局,浮动能将一个元素（通常是一张图片）拉到其容器的一侧，这样文档流就能够包围它。这种布局在报纸和杂志中很常见，因此CSS增加了浮动来实现这种效果。

在CSS早期，开发人员发现使用简单的浮动就可以移动页面的各个部分，从而实现各种各样的布局。不过在后期css的发展陆续出现了表格布局,flex布局,网格布局等等,从而float布局用的也越来越少了

浮动还有必要学吗?

Flexbox正在迅速取代浮动在页面布局中的地位。对新手开发人员而言，Flexbox的行为很直观，可预测性更好。你可能会问是否还有必要学习浮动，CSS浮动的时代是不是结束了？

在现代浏览器中，不用浮动也能比过去更好地实现布局，甚至可以完全弃用浮动。但是如果要支持IE浏览器，现在放弃浮动还为时过早。只有IE10和IE11支持Flexbox，而且还有一些bug。如果不想碰到bug，或者需要支持旧版浏览器，浮动也许是更好的选择。另外，如果你在支持旧代码库，它很可能用到了浮动布局。为了维护旧代码，也需要了解浮动的工作原理。

还有一点，浮动布局通常不需要那么多的标记，新的布局方法则需要添加额外的容器元素。如果你写样式时不允许修改标记，浮动更能满足你的需求。此外，要实现将图片移动到网页一侧，并且让文字围绕图片的效果，浮动仍然是唯一的方法。

浮动的基本使用

浮动很容易使用但是浮动也很容易出现bug,很多新手在学习float时常常会听到一个关键字文档流,

当我们未使用float时,效果是这样

但是我们使用浮动时

这是因为浮动元素不同于普通文档流的元素，它们的高度不会加到父元素上。这可能看起来很奇怪，但是恰好体现了浮动的设计初衷。那我们要如何解决这种问题?

消除浮动

网上有很多种解决方案,但是个人推荐使用伪元素,使用：:after伪元素选择器，就可以快速地在DOM中在容器末尾添加一个元素，而不用在HTML里添加标记。我们这里要对父元素添加伪元素,千万别给浮动对象设置伪元素,不然没啥用

什么是伪元素

伪元素——一种特殊的选择器，可以选中文档的特定部分。伪元素以双冒号（::）开头，大部分浏览器为了向后兼容也支持单冒号的形式。最常见的伪元素是：:before和：:after，用来向元素的开始或者结束位置插入内容。

浮动陷阱

现在页面里的白色容器已经能够包含浮动的媒体元素了，但是出现了另一个问题：四个媒体盒子没有如预期那样均匀地占据两行。虽然前两个盒子（“Strength”和“Cadence”）符合预期，但是第三个盒子（“Change it up”）出现在了右边，也就是第二个盒子的下方，导致第一个盒子下面出现了一片非常大的空白。这是因为浏览器会将浮动元素尽可能地放在靠上的地方.

因为盒子2比盒子1矮，所以它下面有多余的空间给盒子3。盒子3会“抓住”盒子1，而不是清除盒子1的浮动。因此盒子3不会浮动到最左边，而是浮动到盒子1的右下角。这种行为本质上取决于每个浮动块的高度。即使高度相差1px，也会导致这个问题。相反，如果盒子1比盒子2矮，盒子3就没法抓住盒子1的边缘。除非以后内容改变导致元素高度发生变化，否则就不会看到这种现象。

要想修复这个问题很简单：清除第三个浮动元素上面的浮动。更通用的做法是，清除每行的第一个元素上面的浮动。由于已知每行有两个盒子，因此只需要清除每行的第奇数个元素上面那行的浮动即可。你可以用：nth-child()伪类选择器选中这些目标元素。