[JavaScript知识库] CSS父级边框元素塌陷问题的解决办法

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> CSS父级边框元素塌陷问题的解决办法 -> 正文阅读

[JavaScript知识库]CSS父级边框元素塌陷问题的解决办法

CSS父级边框元素塌陷问题的解决办法

1. 重设父级元素得高度（不建议使用）

<style>
  div{
       background-color: green;
       height: 30px;
       width: auto;
       margin: 0px;
   }
   .img1,.img2{
            float: left;
            opacity: 0.5;
    }
</style>
<body>
    <div>
        <img class="img1" src="../images/2.jpg" height="250px" width="200px"/>
        <img class="img2" src="../images/3.jpg" height="200px" width="250px"/>
    </div>
</body>

效果是这样的在这里插入图片描述
改div大小300px

可以看到被包括其中了

2. 在所有浮动元素后加一个div标签

<style>
   div{
            border:3px solid #008000;
            width: auto;
            margin: 0px;
   }
   .img1,.img2{
       float: left;
       opacity: 0.5;
   }
   .clear{
            clear: both;
            margin: 0px;
            padding: 0px;
            border:1px solid red;
            height: 5px;
   }
</style>
<body>
    <div>
        <img class="img1" src="../images/2.jpg" height="250px" width="200px"/>
        <img class="img2" src="../images/3.jpg" height="200px" width="250px"/>
        <div class="clear"></div>
    </div>
    
</body>

在这里插入图片描述

3. 为父级元素增加overfloat属性

大多数情况下是hidden，也可以用auto。但用hidden可以保证父类内容不可见，auto超出会加入滚动条

<style>
   div{
       border:1px solid green;
       width: auto;
       margin: 0px;
       overflow: hidden;
   }
   .img1,.img2{
       float: left;
       opacity: 0.5;
   }
</style>
<body>
    <div>
        <img class="img1" src="../images/2.jpg" height="250px" width="200px"/>
        <img class="img2" src="../images/3.jpg" height="200px" width="250px"/>
    </div>
</body>

在这里插入图片描述

4. 用代码添加div

用伪类实现代码添加div，避免加入了空的div标签

<style>
        div{
            border:3px solid #008000;
            width: auto;
            margin: 0px;
        }
        .img1,.img2{
            float: left;
            opacity: 0.5;
        }
        .content::after{
            content: "";
            display: block;
            clear: both;
        }
</style>
<body>
    <div class="content">
        <img class="img1" src="../images/2.jpg" height="250px" width="200px"/>
        <img class="img2" src="../images/3.jpg" height="200px" width="250px"/>
    </div>
</body>