p标签和div，section有什么本质不同？

写页面遇到一个诡异问题：
代码逻辑如下：

    <ul>
        <li></li>
        <li></li>
    </ul>
    <p></p>
    <p></p>
    <p></p>
    
li{
    float : left;
  }   

结果p标签内容如下图：

三段内容挤在一起。

怀疑是float原因，于是用了3中方法“解决”浮动：

1：<div class="clear"></div>
2：<sction>
    <p></p>
    <p></p>
    <p></p>
</sction>
3：p标签改成div标签：
<div></div>
<div></div>
<div></div>

摸索上述三种方法都可以清除浮动，那么有疑惑：
p标签和div，section在上述问题上有什么本质不同？

---

还有一种清除浮动的方式可以嵌在 ul 列表中

ul {
    &:after {
        content: '';
        display: block;
        clear: both;
    }
    
    li {
        float: left;
    }
}

HTML5 加入的很多标签其实都是在 HTML4 时代长期使用的一些标签的总结，比如我们经常使用 <div class="header">, <div class="article" /> 这样的标签去管理我们的 HTML 片段，所以到了 HTML5 的标准里索性就直接弄成了 <header />, <article />

---

主要是强化语意

---

本质上没有什么不同，只是他们默认的样式属性是不一样的，你可以通过修改他们的样式属性使他们完全一致，不过这样做动静有点大，简单的话就是属性他们的不同样式，灵活使用。（本身他们都是 HTML 的 DOM，区分出这么多不同的样式出来也就是形成一些通用的结构，方便大家搭配使用）