css 浮动导致的父元素高度塌陷

最新推荐文章于 2022-12-06 15:06:41 发布

艾斯比的日常

最新推荐文章于 2022-12-06 15:06:41 发布

阅读量146

点赞数

分类专栏： front

本文链接：https://blog.csdn.net/u012745499/article/details/117828276

版权

front 专栏收录该内容

86 篇文章 1 订阅

订阅专栏

本文解释了CSS中子元素浮动后父元素高度塌陷的问题，介绍了使用`overflow:hidden`和理解BFC(block formatting context)的概念来修复。通过实例演示如何应用这些技巧来确保父元素正确布局。

摘要由CSDN通过智能技术生成

css 子元素设置浮动后, 父元素高度不会被子元素撑开, 导致父元素高度塌陷
我们可以设置父元素 overflow: hidden; 来解决

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    /*
      高度塌陷

      默认情况下子元素撑开父元素
      如果子元素浮动, 则无法撑开父元素, 造成父元素高度塌陷

      解决方式
        overflow: hidden;
        显式设置父元素高度, 例如 100px. 不推荐, 父元素不能自动适应子元素高度

      bfc
        block formatting context 块格式化上下文

     */
    .box1 {
      border: 10px greenyellow solid;
      margin-bottom: 50px;
      overflow: hidden;
    }
    .box2 {
      background-color: red;
      width: 100px;
      height: 100px;
    }
    .box3 {
      background-color: red;
      width: 100px;
      height: 100px;
      float: left;
    }
  </style>
</head>
<body>

<div class="box1">
  <div class="box2"></div>
</div>
<div class="box1">
  <div class="box3"></div>
</div>

</body>
</html>

高度塌陷

艾斯比的日常

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 浮动导致的父元素高度塌陷

css 子元素设置浮动后, 父元素高度不会被子元素撑开, 导致父元素高度塌陷我们可以设置父元素 overflow: hidden; 来解决<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 高度塌陷默认情况下子元素撑开父元素
复制链接

扫一扫

专栏目录