在css布局中，浮动元素会让元素脱离标准文档流，当浮动元素嵌套在其他元素内部时，很容易出现父元素无法感知子元素高度、子元素排列错位等问题，需要针对性的处理方案。
嵌套浮动元素的常见问题
当父元素内部包含浮动子元素时，最典型的问题是父元素高度塌陷。因为浮动元素脱离标准流后，不会撑开父元素的高度，导致父元素高度为0，后续的非浮动元素会跑到浮动元素下方，破坏整体布局。
比如下面的嵌套结构，父元素div内部有两个浮动的子div，父元素没有设置固定高度，就会出现高度塌陷：
<div class="parent"> <div class="child left">左浮动子元素</div> <div class="child right">右浮动子元素</div> </div> <div class="next">后续的普通元素</div>
对应的css样式如下：
.parent {
border: 1px solid #333;
/* 父元素没有设置高度 */
}
.child {
width: 100px;
height: 100px;
}
.left {
float: left;
background-color: #f00;
}
.right {
float: right;
background-color: #0f0;
}
.next {
background-color: #ccc;
height: 50px;
}
此时父元素的边框只会显示一条线，高度几乎为0，next元素会跑到两个浮动子元素的下方，不符合预期布局。
处理嵌套浮动元素的方法
1. 额外标签清除浮动法
这种方法是在所有浮动子元素的最后面，添加一个空的块级标签，给这个标签设置clear: both属性，清除左右两侧的浮动，让父元素重新感知到子元素的高度。
修改后的html结构如下：
<div class="parent"> <div class="child left">左浮动子元素</div> <div class="child right">右浮动子元素</div> <div class="clear-float"></div> </div> <div class="next">后续的普通元素</div>
新增的css样式：
.clear-float {
clear: both;
}
这种方法的优点是简单易懂，兼容性好，缺点是需要额外添加无意义的html标签，不符合结构与样式分离的原则。
2. overflow属性触发BFC法
给父元素设置overflow属性，值为hidden、auto或者scroll，可以触发父元素的BFC（块级格式化上下文），BFC内部的浮动元素会被父元素包含，从而解决高度塌陷问题。
只需要修改父元素的css样式：
.parent {
border: 1px solid #333;
overflow: hidden; /* 触发BFC，包含内部浮动元素 */
}
这种方法的优点是不需要额外添加标签，代码简洁，缺点是如果子元素有超出父元素的内容，会被隐藏或者出现滚动条，需要根据实际场景选择。
3. 伪元素clearfix法
这是目前最常用的处理方法，通过给父元素添加clearfix类，利用伪元素在父元素内部生成一个看不见的块级元素，清除浮动，不需要额外添加html标签，也不会影响其他样式。
首先定义clearfix的样式：
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/* 兼容IE6、IE7 */
.clearfix {
*zoom: 1;
}
然后给父元素添加clearfix类：
<div class="parent clearfix"> <div class="child left">左浮动子元素</div> <div class="child right">右浮动子元素</div> </div> <div class="next">后续的普通元素</div>
这种方法的优点是没有副作用，兼容性好，不需要额外标签，适合大多数嵌套浮动场景，是实际开发中的首选方案。
不同方法的适用场景
可以通过下面的表格快速选择适合的处理方法：
| 处理方法 | 适用场景 | 缺点 |
|---|---|---|
| 额外标签法 | 简单临时布局，不需要考虑结构优化 | 添加无意义标签，不符合分离原则 |
| overflow触发BFC法 | 子元素没有超出父元素的内容，需要快速解决 | 可能隐藏超出内容或产生滚动条 |
| 伪元素clearfix法 | 大多数正式开发场景，需要无副作用解决 | 需要写伪元素样式，稍微多几行代码 |
注意事项
处理嵌套浮动元素时，需要注意如果父元素本身也设置了浮动，那么父元素会自然包含内部的浮动子元素，不需要额外清除浮动，但父元素浮动后也会影响后续元素的排列，需要根据整体布局判断。
另外，现在css3新增了display: flow-root属性，也可以直接触发BFC，解决浮动高度塌陷问题，代码更简洁，不过兼容性稍差，在不需要兼容旧浏览器的场景下可以使用：
.parent {
border: 1px solid #333;
display: flow-root; /* 直接触发BFC，无副作用 */
}