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

最新推荐文章于 2024-05-21 21:36:17 发布

是小爱呀

最新推荐文章于 2024-05-21 21:36:17 发布

阅读量184

点赞数 5

分类专栏： Web端学习文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_51465537/article/details/136651301

版权

Web端学习专栏收录该内容

16 篇文章 3 订阅

订阅专栏

问题：

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

解决方案：

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）是较为常见和推荐的做法。

是小爱呀

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS浮动引起的问题和解决方案

高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。通常来说，使用伪元素清除浮动（方式3和方式5）是较为常见和推荐的做法。5：万能清除法（给塌陷的元素添加伪对象）内部宽高超过父级div时，会出现滚动条。子元素高超过父级时，会出现溢出。3：在浮动元素后面加一个空标签。超出部分被隐藏，布局时要注意。增加空标签，不利于页面优化。1：给父元素单独定义高度。
复制链接

扫一扫