在CSS的常规文档流中，块级子元素的宽度和高度会默认撑开父容器的尺寸，但浮动元素由于脱离了标准文档流，其宽高对父元素的影响和普通元素存在明显差异，这也是很多布局异常问题的根源。
浮动元素的基本特性
当给元素设置float: left或者float: right属性后，该元素会脱离标准文档流，不再占据原本的文档流空间。浮动元素的宽高计算遵循自身规则，默认宽度由内容决定，高度也由自身内容撑开，除非手动设置固定宽高。
浮动元素宽高对父元素的影响
宽度影响
浮动元素的宽度不会撑开父元素的宽度，父元素的宽度默认由其包含块决定。如果父元素没有设置固定宽度，且内部只有浮动子元素，父元素的宽度会收缩到最小，甚至可能出现宽度为0的情况。同时浮动元素会尽量向父元素的左侧或者右侧靠拢，直到碰到父元素的边界或者其他浮动元素。
高度影响
这是浮动元素最容易引发问题的部分。由于浮动元素脱离了标准文档流，父元素在计算自身高度时，会忽略浮动子元素的高度，导致父元素的高度无法被浮动子元素撑开，出现高度塌陷的问题。我们可以看下面的示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.parent {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.float-child {
float: left;
width: 100px;
height: 100px;
background-color: #4CAF50;
margin: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="float-child"></div>
<div class="float-child"></div>
</div>
</body>
</html>
运行上述代码后，父元素的背景只会显示在浮动元素的上方很小的一部分，因为父元素的高度没有被两个100px高加上margin的浮动子元素撑开，这就是典型的父元素高度塌陷问题。
解决父元素高度塌陷的方案
方案一：父元素设置固定高度
如果明确知道浮动子元素的总高度，可以直接给父元素设置固定高度，这样父元素的高度就不会被浮动元素影响。但这种方式灵活性较差，不适合子元素高度动态变化的场景。
.parent {
height: 220px; /* 两个子元素高度100px + 上下margin各10px*2 */
background-color: #f0f0f0;
border: 1px solid #ccc;
}
方案二：使用clear属性清除浮动
在父元素内部最后添加一个空的块级元素，给该元素设置clear: both属性，强制让该元素出现在浮动元素的下方，从而撑开父元素的高度。
<div class="parent">
<div class="float-child"></div>
<div class="float-child"></div>
<div style="clear: both;"></div>
</div>
方案三：父元素触发BFC
给父元素设置可以触发BFC（块级格式化上下文）的属性，比如overflow: hidden、display: flow-root等，BFC容器会自动计算浮动子元素的高度，从而解决高度塌陷问题。
.parent {
background-color: #f0f0f0;
border: 1px solid #ccc;
/* 触发BFC，自动包含浮动子元素 */
overflow: hidden;
/* 或者 */
/* display: flow-root; */
}
方案四：使用伪元素清除浮动
这是目前最常用的方案，不需要额外添加DOM元素，通过父元素的伪元素::after来清除浮动，兼容性和灵活性都比较好。
.parent::after {
content: "";
display: block;
clear: both;
}
.parent {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
总结
浮动元素的宽高不会像普通文档流元素那样撑开父元素，其中宽度会影响父元素的收缩表现，高度则会导致父元素高度塌陷。实际开发中可以根据场景选择合适的清除浮动方案，优先推荐使用伪元素清除浮动或者触发BFC的方式，既不会影响布局灵活性，也能稳定解决父元素被浮动元素影响的问题。