触发重排的情况

重排会在以下情况下发生：

重排是一种开销较大的操作，因为它可能会影响整个 DOM 树或其较大部分，从而导致大量的计算和页面重新绘制。

重绘

重绘（Repaint）是当元素的外观发生变化但不影响布局时触发的过程。重绘只涉及外观的改变，如颜色、背景、边框颜色等，不涉及元素的位置或尺寸的计算。

触发重绘的情况

重绘会在以下情况下发生：

重绘的开销通常比重排小，因为它不涉及布局计算，只需要更新元素的外观。

 

盒模型（ 默认为标准盒模型 ）
构成：content，padding，border，margin
标准盒模型 content-box：它的width = content     
IE盒子模型 border-box ：它的width = content + padding + border

 

BFC 的作用
1、清除浮动：浮动元素可能会导致其后的兄弟元素布局混乱，通过创建 BFC 可以包裹浮动元素，从而使得其后的元素正常布局。
2、防止外边距折叠：两个相邻的块级盒子的上下外边距可能会发生折叠（即合并成一个），创建 BFC 可以防止这种情况发生。
3、包含浮动：父元素可以包含其内部的浮动子元素，而不需要额外的清除浮动的方法。
4、防止文本环绕浮动元素：在 BFC 内部，块级元素不会被浮动元素覆盖，保证布局的完整性。

如何创建BFC
1、浮动元素：float 属性不为 none 的元素会创建 BFC。
2、绝对定位元素：position 属性为 absolute 或 fixed 的元素会创建 BFC。
3、display 为 inline-block、flex、inline-flex、grid、inline-grid 的元素。
4、overflow 属性不为 visible 的元素。
 

清除浮动
1、额外标签法
<div style="clear: both"></div>

2、使用overflow属性清除浮动。

// 设置父元素的 overflow 属性为 auto 或 hidden，这样父元素会扩展以包含浮动元素。
<div class="container"><div class="float-box"></div><div class="content"></div>
</div>.container {overflow: auto; /* 或 overflow: hidden; */
}

3、使用伪元素
在父元素上使用伪元素 ::after 来清除浮动

<div class="container"><div class="float-box"></div><div class="content"></div>
</div>.container::after {content: "";display: table;clear: both;
}