HTML与CSS：BFC、IFC理解及清除浮动、盒模型和选择器优先级

"HTML & CSS 知识点概览" 在HTML和CSS的世界里，理解和掌握BFC（Block Formatting Context）和IFC（Inline Formatting Context）是构建页面布局的基础。BFC和IFC定义了元素如何在页面上排列和交互。 **BFC（块级格式化上下文）** 是一种布局概念，主要涉及以下规则： 1. BFC中的子元素沿垂直方向堆叠，间距由它们的margin决定。 2. 同一BFC内的相邻盒的margin会发生层叠。 3. 元素的左边与包含它的BFC的左边接触，即使有浮动元素也不会受影响。 4. BFC区域不会与浮动元素重叠。 5. BFC是一个独立的容器，其内部元素不会影响外部元素，反之亦然。 6. 计算BFC高度时，浮动元素也会被纳入考虑。 触发BFC的条件包括： 1. 根元素 2. 浮动元素（float属性不为none） 3. 绝对或固定定位元素（position属性为absolute或fixed） 4. 显示模式为inline-block、table-cell、table-caption或flex的元素 5. overflow属性不为visible **IFC（行级格式化上下文）** 规定了元素在水平方向上的布局，主要包括： 1. 内部元素水平排列，当一行无法容纳时自动换行。 2. IFC的高度由其中最高的元素决定。 **CSS 清除浮动** 是解决“浮动元素导致的父元素高度塌陷”问题的关键。常见方法包括： 1. 父元素设定固定高度并手动扩展。 2. 在浮动元素后面添加空标签，并设置`clear:both`。 3. 父元素设置`overflow:hidden`。 4. 使用伪类`:before`和`:after`及`zoom:1`来创建新的BFC（双伪元素法）。 **盒模型** 描述了元素的尺寸计算，分为两种： 1. IE盒模型（怪异盒模型，border-box）：盒子宽度包括content、padding和border。 2. W3C盒模型（标准盒模型，content-box）：盒子宽度仅由content决定。 **CSS选择器优先级** 规定了不同类型的CSS选择器的权重： 1. `!important`声明 > 内联样式 > ID选择器 > 类/属性/伪类 > 元素/关系选择器。 **CSS三列布局** 通常可以实现各种布局效果，如左右两列固定宽度，中间列自适应。通过`float`、`display`属性等技术可以轻松实现这一布局。 例如，使用`float`实现这种布局，左侧和右侧的div分别设置`float:left`和`float:right`，中间的div默认占据剩余空间。如果需要更复杂的布局，还可以使用Flexbox或Grid布局。