正确理解盒模型和浮动是实现网页布局的基础。CSS盒模型包含内容、内边距、边框和外边距，默认宽高仅含内容，通过box-sizing: border-box可使宽高包含内边距和边框，推荐全局设置以避免布局错乱。当元素浮动时会脱离文档流，导致父容器高度塌陷。使用clearfix类可通过伪元素插入并清除浮动，恢复父容器对子元素的高度包裹，标准写法为.clearfix::after { content: ""; display: block; clear: both; } 并配合zoom兼容旧版IE。现代方案可用overflow: hidden或更优的display: flow-root创建块级格式化上下文，自动包含浮动子元素。掌握这些技术有助于构建结构清晰、兼容良好的页面布局。
在网页布局中，盒模型和浮动是CSS的基础概念。正确理解并应用它们，能帮助我们构建结构清晰、兼容性良好的页面。下面介绍如何使用CSS实现盒模型控制以及如何通过clearfix解决浮动带来的高度塌陷问题。
理解CSS盒模型
CSS盒模型决定了元素如何在页面上显示，每个元素都被看作一个矩形盒子，包含四个部分：内容(content)、内边距(padding)、边框(border)和外边距(margin)。
默认情况下，元素的width和height只包括内容区域。当你添加padding或border时，实际占用空间会更大。
使用box-sizing属性可以更直观地控制盒模型：
-
box-sizing: content-box;— 默认值，宽高仅包含内容 -
box-sizing: border-box;— 宽高包含内容、内边距和边框
推荐在全局设置中统一使用border-box，避免布局错乱：
* {
box-sizing: border-box;
}
浮动(float)与高度塌陷问题
当元素设置了float: left或float: right后，会脱离正常文档流，导致其父容器无法正确感知子元素的高度，出现“高度塌陷”——即父元素高度为0，影响后续布局。
例如：
.parent {
border: 1px solid #000;
}
.child {
float: left;
width: 100px;
height: 100px;
background: red;
}
此时.parent可能显示为无高度，尽管它包含浮动子元素。
使用clearfix清除浮动
clearfix是一种经典的清除浮动方法，通过在父容器上应用一个特殊类，利用伪元素插入一个不可见的内容并清除其浮动，从而恢复父容器对子元素高度的包裹能力。
标准的clearfix写法如下：
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearfix {
zoom: 1; /* 兼容IE6/7 */
}
将这个类应用到包含浮动子元素的父容器上即可解决问题：
<div class="parent clearfix"> <div class="child"></div> </div>
现代替代方案（可选）
虽然clearfix仍然广泛使用，但现代布局提供了更简洁的方法：
例如：
.parent {
display: flow-root; /* 自动包含浮动子元素 */
}
基本上就这些。掌握盒模型和浮动清除，是理解传统CSS布局的关键一步。clearfix虽老但实用，值得保留于工具箱中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
