HTML布局之元素浮动属性
1.1 CSS float属性
语法：
float:left; //设置元素靠左浮动
float:right; //设置元素靠右浮动
float:none; // 默认值。元素不浮动，并会显示在其在文本中出现的位置
注意：任何元素都可以浮动。
1.2设置float属性带来的后果
1、一个元素设置浮动之后，会生成一个块级框，而不论它本身是何种元素。
2、一个元素设置浮动之后，它会浮动紧靠到父元素容器的边界，如果该元素没有父元素，它就会浮动到页面容器的边界。
3、一个元素浮动之后，页面正常流里面的其他元素会环绕该元素。
1.3清除元素浮动
CSS clear属性规定元素的哪一侧不允许其他浮动元素。设置clear属性，使元素恢复到正常文档流。
语法：
clear:left; //在左侧不允许浮动元素
clear:right; //在右侧不允许浮动元素
clear:both; //在左右两侧均不允许浮动元素
clear:none; //默认值。允许浮动元素出现在两侧
1.4应用实例
例1：
布局示意图：
<body>
<heaer></header>
<section></section>
<aside></aside>
<footer></footer>
</body>
分析：
默认情况下section和aside作为块级元素，布局是头尾相接。使用float属性，将<section>和<aside>设置为一个左浮动，一个右浮动，即可完成两者靠边并排布局。
CSS代码：
section{
float: left;
margin: 10px;
width: 600px;
}
aside{
float: right;
margin: 10px;
width: 320px;
}
给footer元素设置clear属性迫使它回到正常的文档流——定位到俩个浮动元素的下面。
footer{
clear: both;
}
注意：使用float属性进行左右布局时，应考虑父级元素的宽度。如果父级元素的宽度小于两者的总宽度时，写在前面的元素会显示在上面，另一个紧接显示在下一行。