如下所示： /* ======================================== Clearfix =
CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有布局，使内容越发易懂。
CSS有好几种差此外定位属性，每种都有本身的使用场景。在这节课中我们会通过差此外案例——可复用的结谈判针对单元素的构造——来介绍每种要领。
浮动定位的此中一种要领就是使用float属性。float属性非常好用，可以用在很多处所。
素质来说，float属性是使元素脱离正常的流式构造，并将它安排在父元素的左侧或右侧。然后页面中所有的元素城市环绕浮动元素构造。例如我们将段落间的一张图片设置为浮动，那么这些段落城市围绕图片换行。
当我们将多个元素同时设置为浮动元素，那么这些元素将泛起相邻或相对构造，如多列构造。
float有好几个值，最常用的值是left和right。使元素浮动到父级元素的左侧或右侧。
img { float: left; } 浮动操练我们先创建一个通用页面，含有页头，页脚，中间有两列。最抱负的情况就是在<body>元素内创建第二节课"了解HTML"中提到的<header>，<section>，<aside>和<footer>元素。
<header>...</header> <section>...</section> <aside>...</aside> <footer>...</footer>
<section>和<aside>元素都是块状元素，它们默认上下构造。但我们实际上想要它们并排显示。所以在此，我们就可以将<section>元素设为左浮动，将<aside>元素设为右浮动，使它们泛起相互相对的两列。
CSS代码如下：
在此提一下，元素设为浮动后，会浮动到父级元素的边沿。如果没有父级元素，那么它会浮动到页面的边沿。
当我们设置一个元素为浮动，我们就将它从HTML文档的正常流式构造中取出，这就导致元素的默认宽度取决于其内容的宽度。有时我们用可复用的构造创建多列的时候并不但愿如此，那就可以为列设置一个固定宽度。此外，为了防备浮动元素紧靠在一起，使内容相互紧贴，可以使用margin属性来创建元素间的空隙。
如下所示：
浮动会转变元素display的状态
有一个重要的点需要记住：将元素设为浮动就是将它从正常的流式构造中脱离，而这会转变元素默认的display值。float属性依赖于display属性为block的元素。如果一个元素的默认display值不是block，那么它会将默认值改成block。
例如，span是一个内联元素，它默认的display值为inline,width和height值是不生效的。然而，如果我们将这个内联元素设置为浮动，那么它的默认display值会酿成block,这时候width和height值就生效了。
当我们设置元素为浮动时，都需要注意display值的变革。
若只有两列，我们可以将此中一个元素设置为左浮动，另一个元素设置为右浮动，但若是多列的时候就需要换一种要领。例如，我们但愿在<header>和<footer>元素之间添加一行三列的布局，可以先删失之前写的<aside>元素并使用三个<section>元素，如下所示：
<header>...</header> <section>...</section> <section>...</section> <section>...</section> <footer>...</footer>要将三个<section>元素并排显示，我们不再用之前的左浮动加右浮动的模式，而是将三个元素都设置为左浮动。同时也要为元素设置宽度使其摆列更合理。
section { float: left; margin: 0 1.5%; width: 30%; }此刻出此刻我们眼前的就是三列宽度和外边距一致，都向左浮动的元素。
断根浮动
float元素最初的设置是为了在内容中插入图片，使内容自然地环绕图片显示。虽然它在图片中使用非常完美，但是float属性并不是为了定位和构造设计的，所以在这方面存在一些缺陷。
此中一个缺陷就是浮动元素的下一个兄弟元素和父元素的样式可能会衬着异常。当元素浮动时它脱离了正常构造，导致围绕在浮动元素周围的元素的样式都受到了影响。
最常见的就是margin和padding属性值衬着异常，因为它们shi与浮动元素融为一体。固然，也有一些其它的样式也受到了影响。
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31430.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")