2020-12-22H5语义化标签和BFC

---

一、H5语义化标签

H5标签在IE9之前都需要转换成块级元素 display：block
在移动端就不需要考虑兼容问题。 H5+css3可以放心的在移动端使用。
1.nav 定义导航
2.header 表示网页的头部。通常是一些导航信息或者标题。
3.article 表示一块独立的部分。
4.aside 对article的内容进行信息的辅助解释。次要信息，比如博客网站中的侧边公告，或者广告，分类等信息。
5.section 文档中的一个节点或者区域。
6.footer 页面的底部。通常是链接或版权信息
7.hgroup 标签用于对网页或区段（section）的标题进行组合。

<!-- 页面头部 -->
    <header>
        <hgroup>
            <h1>H5是什么？</h1>
            <h2>作者：匿名</h2>
        </hgroup>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">新随笔</a></li>
                <li><a href="#">订阅</a></li>
                <li><a href="#">管理</a></li>
            </ul>
        </nav>
    </header>

<!-- 页面主题内容 -->
    <main>
        <article>
            <section>
                <p>其实H5它包换了HTML5 的标记规范，运用到了例如 CSS、JS(Java)等多种计算机语言，可以实现多种动效和视听效果，会利用到后端和前端的多种功能，主要在手机端传播，可以跨平台在PC、平板上浏览等等...</p>
            </section>
        </article>
        <aside>
            公告
        </aside>
        <aside>
            广告
        </aside>
    </main>

<!-- 页面底部 -->
    <footer>
        版权信息/超链接
    </footer>

二、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.阻止元素被浮动元素遮盖

• 外边距塌陷
  （之前）
  
  （之后）
  

• 外边距重合
  （之前）
  
  （之后）
  

• 浮动对普通元素的影响（阻止元素被浮动元素遮盖，普通元素不会被遮挡）
  （之前）
  
  （之后）
  

• 父类高度塌陷
  不设高度的情况下，父类高度为0

.father1 {
            width: 200px;
            background-color: brown;
            <!-- 用哪种方法都可以 -->
            overflow: hidden;
        }
        
        .son1 {
            width: 100px;
            height: 100px;
            float: left;
            background-color: cadetblue;
        }