前端Html相关知识综合，猛练自然强

html目录

1.清除浮动的几种方式，各自的优缺点，推荐使用哪种

清除浮动的四种常用方法
1.额外标签法 在container div的最后位置添加一个新的元素，并为其设置clear:both;

优点： 容易理解。
缺点： 语义化差，添加了无意义的元素

2.设置overflow触发BFC 通过设置overflow:hidden;或者overflow:auto;来触发BFC特性，使得其可以清除浮动。理论上讲，只要触发了BFC特性，该元素就可以清除浮动（即可包含浮动元素）。

优点： 使用简单，一小段代码即可生效。
缺点： 无法显示溢出的内容或者产生不美观的滚动条

3.设置after伪元素 通过给container div设置after伪元素来清除浮动，其原理和额外标签法类似，但是after伪元素不占用DOM。

优点： 不占用DOM，渲染效率提高，结构语义化更好。
缺点： IE6-7不支持伪元素::after，考虑兼容得添加zoom:1触发hasLayout来清除浮动。

4，设置before和after双伪元素 与设置after伪元素同理，增加设置before伪元素是为了解决元素上方浮动元素所带来的影响

优点： 在设置单个after伪元素的优点的基础上，还确保了被设置容器的所在行的独立性。
缺点： IE6-7不支持伪元素::after，考虑兼容得添加zoom:1触发hasLayout来清除浮动。

2. 如何监听div的尺寸变化

1. 使用 ResizeObserver
   使用方法

确定想要被监听的元素 box
确定当被监听的元素尺寸发生变化时触发事件 onResize
使用 ResizeObserver 创建监听

const observer = new ResizeObserver(onResize).observe(box)

当页面或组件被销毁时断开监听（非必须）

observer.disconnect()

2. 使用 relative + 100% + iframe/object
   使用方法

将被监听的元素 box 设置为 relative，或者在元素外面增加一层元素 box，将外层元素设置为 relative，同时设置内层元素充满 box
创建一个 iframe 或者 object，令该元素的 id 为 helper。设置属性为 absolute，width 和 height 均为 100%，充满 box，并设置 visibility 为 hidden。这一步的操作
确定当被监听的元素尺寸发生变化时触发事件 onResize
监听 iframe 或 object 的 window 的 resize 事件，在事件回调中执行 onResize 方法