HTML5：布局类标签
HTML是具有语义化的语言，针对网页的布局，有一类标签代表各种意义的“布局盒子”。所有的布局类标签都主要用来构建页面的内容区域，是双标签类型，是双标签类型，默认显示为块状元素。
通用的布局标签：<div>。语义：无明确的含义，通常就是代表“盒子”；应用：根据布局的需要，可以使用到任何地方，可以用id和class来对<div>进行定义或区分。
HTML5版本新增的常用布局标签：
标签 语义
<header> 页面或区域的头部
<footer> 页面或区域的底部
<nav> 导航
<section> 文档中的章节、区段、板块等（类似div，但主要针对文档类区域）
<aside> 侧边栏
<article> 文章/文档
HTML5布局的优势：页面代码更加简单、高效；新布局标签本身具有的语义明确告知浏览器其在页面中的位置和结构意义，增强了对搜索引擎的友好型，提升SEO价值。
HTML5布局的缺点：老版本的浏览器不支持HTML5这类布局标签，如IE8或更早的版本。从兼容角度出发，目前多数站点扔使用<div>标签构建传统布局。
CSS：float浮动属性
作用：将页面元素浮动起来，使其能够向左或者向右排列；应用：实现页面中布局的左右排版，实现图文环绕的版式效果。
值 说明
left 元素本身向左浮动
right 元素本身向右浮动
none 元素不浮动（默认值）
原理：浮动元素将脱离默认的文档流，漂浮在默认文档流之上。浮动的元素会向左或向右移动，直到它的外边缘碰到父级元素或这个元素之前的另一个浮动元素的边框为止。
特点：1. 对齐方式（不管元素如何浮动，始终以父级容器或它前面同层次并列的元素作为参考进行对齐。）
2. 一旦元素浮动起来，就可以直接适用CSS盒子模型属性。（行间元素脱离默认文档流的行间限制。）
3. 对内容的影响（尽管浮动元素脱离了默认文档流，但仍然会影响到默认文档流中的盒子里面装的“内容”（图文），这些“内容”会给浮动元素留出占位。盒子还是那么大，但是内容给浮动元素让出了位置。内容为王。）
CSS：clear清除浮动
作用：规定某个元素的某一侧不允许存在浮动元素。
应用 ：清除其他浮动元素对其产生的影响。
原理：设置了clear的元素将不再像前一个浮动元素对齐，换行重新开始。
值 说明
both 两侧都不允许存在浮动元素
left 清除元素左侧的浮动元素
right 清除元素右侧的浮动元素
none 无清除效果（默认值）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#box-a {width:200px; height:200px; background:red;}
#box-b {width:300px; height:300px; background:yellow;}
#box-c {width:800px; height:100px; background:blue;}
#box-a {float:left;}
#box-b {float:right;}
#box-c {clear:both;}/*清除box-a和box-b的浮动对box-c的影响*/
</style>
</head>
<body>
<div id="box-a">box a</div>
<div id="box-b">box b</div>
<div id="box-c">box c</div>
</body>
</html>
