本文共 839 字，大约阅读时间需要 2 分钟。

语义化的好处

1、html结构清晰，代码可读性较好，便于团队维护和开发

2、更有利于搜索引擎或辅助设备理解html页面内容，搜索引擎可以根据标签语言确定上下文和权重关系

H5常用的语义化标签

   
        用于对网站和页面内容分块，划分单独的模块区域 
    
     独立的文章展示 
     
    
   

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

转载地址：https://blog.csdn.net/z18237613052/article/details/111559894 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！