CSS浮动引起的问题和解决方案

问题：

高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。

解决方案：

1：给父元素单独定义高度

缺点：子元素高超过父级时，会出现溢出
示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.parent {height: 200px; /* 固定高度 */border: 1px solid #ccc;}.child {float: left;width: 100px;height: 150px;background-color: lightblue;margin: 10px;}</style>
</head>
<body><div class="parent"><div class="child"></div></div>
</body>
</html>

2：父级定义 `overflow: hidden;`（兼容 IE 的 `zoom: 1;`）

缺点：超出部分被隐藏，布局时要注意
示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.parent {overflow: hidden;zoom: 1; /* 兼容 IE */border: 1px solid #ccc;}.child {float: left;width: 100px;height: 150px;background-color: lightblue;margin: 10px;}</style>
</head>
<body><div class="parent"><div class="child"></div></div>
</body>
</html>

3：在浮动元素后面加一个空标签

缺点：增加空标签，不利于页面优化
示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.parent {border: 1px solid #ccc;}.child {float: left;width: 100px;height: 150px;background-color: lightblue;margin: 10px;}.clearfix::after {content: "";display: block;clear: both;}</style>
</head>
<body><div class="parent"><div class="child"></div><div class="clearfix"></div></div>
</body>
</html>

4：父级定义 `overflow: auto;`

缺点：内部宽高超过父级div时，会出现滚动条
示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.parent {overflow: auto;border: 1px solid #ccc;}.child {float: left;width: 100px;height: 150px;background-color: lightblue;margin: 10px;}</style>
</head>
<body><div class="parent"><div class="child"></div></div>
</body>
</html>

5：万能清除法（给塌陷的元素添加伪对象）

缺点：有兼容性问题
示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.parent {border: 1px solid #ccc;}.child {float: left;width: 100px;height: 150px;background-color: lightblue;margin: 10px;}.clearfix::after {content: "";display: table;clear: both;}//如果需要兼容IE/7/6需要把以下这句加上.clearfix {*zoom: 1;}</style>
</head>
<body><div class="parent"><div class="child"></div><div class="clearfix"></div></div>
</body>
</html>

通常来说，使用伪元素清除浮动（方式3和方式5）是较为常见和推荐的做法。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/740786.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！