HTML5—新语义元素使用及兼容，BFC解决曾经遇到的问题

HTML5语义元素

什么是语义元素?

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例: < div> 和 < span> - 无需考虑内容.

语义元素实例: < form>, < table>, and < img> - 清楚的定义了它的内容。

H5新语义元素：

• < header>：表示网页的头部。通常是一些导航信息或者标题。
• < nav>：定义导航
• < section>：文档中的一个节点或者区域。比如章节、页眉、页脚或文档中的其他部分，section通常 包含了一组内容及其标题。
• < article>：表示一块独立的部分。
• < aside>：定义页面主区域内容之外的内容（比如侧边栏）。
• < figure>：标签规定独立的流内容（图像、图表、照片、代码等等）。
• < figcaption>：定义 < figure> 元素的标题。
• < footer>：页面的底部。通常是链接或版权信息。

在一个网页中，这些新的语义标签元素位置如下图所示：

兼容性

H5标签在IE9之前都需要转换成块级元素 display：block
在移动端就不需要考虑兼容问题。 H5+css3可以放心的在移动端使用。

为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):

header, section, footer, aside, nav, article, figure
{
    display: block;
}

BFC应用

之前遇到的一些问题：

1. 外边框塌陷
2. 外边框重合
3. 浮动对普通元素的影响

BFC：block formatting context 块级格式化上下文。
官方解释为：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。BFC提供了一个环境，HTML元素在这阁环境中会按照一定规则进行布局。
个人理解：
BFC的目的就是形成一个独立的空间，在这个空间内的子元素不会在布局上影响到外面的元素。

如何创建BFC

1. overflow 不为visible，可以让属性为：hidden auto scroll。
2. 浮动 float不为none。只要设置了浮动，当前元素就拥有了BFC属性。
3. 定位 绝对定位和固定定位。 默认和相对定位不会创建BFC空间。
4. display inline-block table-cell flex inline-flex

BFC的作用

1. 解决margin塌陷
2. 父类高度塌陷
3. 阻止元素被浮动元素遮盖