父盒高度的塌陷和解决方法＋多列布局

冰冻果冻

已于 2024-10-29 21:02:09 修改

阅读量946

点赞数 13

文章标签： css css3 html

于 2024-10-16 00:02:32 首次发布

本文链接：https://blog.youkuaiyun.com/2401_85545586/article/details/142966574

版权

父盒高度的塌陷

父盒高度的塌陷是指父级容器（父盒）内部元素的高度小于父盒的实际高度，导致父盒的高度被塌陷或压缩的现象。

这种现象通常发生在父盒内部的元素使用了浮动或绝对定位，而没有清除浮动或设置适当的高度。在这种情况下，父盒将不会根据其内部元素的高度自动调整自身的高度。

举列子

父盒高度塌陷

运行代码：

 <style>
        article{
            width: 500px;
            background-color: gray;
            border: 5px black solid;
            /*如果父盒子没有设置高度，子盒的浮动会导致父盒作高度塌陷，
            父盒高度塌陷会导致父盒的兄弟盒布局*/

        }
    #div1{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin-bottom: 5px;
        float: left;
    }
    #div2{
        width: 100px;
        height: 100px;
        background-color: brown;
        margin-bottom: 5px;
       float: left;
    
    }
    #div3{
        width: 100px;
        height: 100px;
        background-color: green;
        margin-bottom: 5px;
        float: left;
    
    }
    footer{
        width: 500px;
        height: 20px;
        background-color: blue;
        float: left;
    }
   
</style>
</head>
<body>
    <article>
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
</article>
<footer>页脚</footer>
</body>
</html>

要解决父盒高度的塌陷问题，可以采取以下几种方法：

清除浮动：在父盒的样式中添加 overflow: auto 或 overflow: hidden，或者使用 clear: both 在父盒下方添加一个空的 div 元素。
设置适当的高度：可以通过在父盒的样式中设置固定的高度或最小高度来解决高度塌陷问题。
使用伪元素清除浮动：可以在父盒的样式中添加 ::after 伪元素，并设置 clear: both，这样可以自动清除浮动。

总之，通过清除浮动或设置适当的高度可以解决父盒高度塌陷的问题，确保父盒的高度能够根据内部元素的高度自动调整。

举列子：

利用清除浮动解决父盒塌陷

<style>
        article{
            width: 500px;
            background-color: gray;
            border: 5px black solid;
            /*如果父盒子没有设置高度，子盒的浮动会导致父盒作高度塌陷，
            父盒高度塌陷会导致父盒的兄弟盒布局*/

        }
    #div1{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin-bottom: 5px;
        float: left;
    }
    #div2{
        width: 100px;
        height: 100px;
        background-color: brown;
        margin-bottom: 5px;
       float: left;
    
    }
    #div3{
        width: 100px;
        height: 100px;
        background-color: green;
        margin-bottom: 5px;
        float: left;
    
    }
    footer{
        width: 500px;
        height: 20px;
        background-color: blue;
        float: left;
    }
    #div4{
        width: 200px;
        height: 200px;
        clear: both;
    }
</style>
</head>
<body>
    <article>
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
<footer>页脚</footer>
<div id="div4"  style="clear: both;">4</div>
</body>
</html>

运行结果:

利用设置高度解决父盒塌陷

 <style>
        article{
            width: 500px;
            height: 400px;
            background-color: gray;
            border: 5px black solid;
            /*如果父盒子没有设置高度，子盒的浮动会导致父盒作高度塌陷，
            父盒高度塌陷会导致父盒的兄弟盒布局*/

        }
    #div1{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin-bottom: 5px;
        float: left;
    }
    #div2{
        width: 100px;
        height: 100px;
        background-color: brown;
        margin-bottom: 5px;
       float: left;
    
    }
    #div3{
        width: 100px;
        height: 100px;
        background-color: green;
        margin-bottom: 5px;
        float: left;
    
    }
    footer{
        width: 500px;
        height: 20px;
        background-color: blue;
        float: left;
    }
   
</style>
</head>
<body>
    <article>
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
<footer>页脚</footer>
</body>
</html>

运行结果：

两列布局

CSS两列布局是一种常用的网页布局方式，可以将网页内容分为两列，一列为主内容区域，另一列为侧边栏或其他辅助内容区域。

以下是一种常见的实现方式：

HTML结构：

<div class="container">
  <div class="main-content">
    <!-- 主内容区域 -->
  </div>
  <div class="sidebar">
    <!-- 侧边栏或其他辅助内容区域 -->
  </div>
</div>

.container {
  display: flex;
}

.main-content {
  flex-grow: 1;
}

.sidebar {
  width: 200px;
}

可以根据实际需求进行调整和扩展，例如设置侧边栏在左侧或右侧，设置不同的宽度和样式等。

练习;

运行代码：

 <style>
        nav ul{
            height:30px;  /*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/
            background-color: aquamarine;
        }
        nav ul li{
            margin-right: 20px;
            float:left;
        }
        #contact{
            width: 220px;
            height: 160px;
            background-color: pink;
            border: 2px black solid;
            position: fixed;
            left:1100px;
            top:500px;
        }

        section{
            /* width: 100%; */
            background-color: gray;

        }

        article{
            width: 70%;
            height: 500px;
            background-color: red;
            border: 2px black solid;
            float: left;
        }

        aside{
            width: 28%;
            height: 500px;
            background-color: green;
            border: 2px black solid;
            float: left;
            margin-left: 1px;
            
        }

        footer{
            width: 100%;
            height: 10%;
            background-color: rgb(243, 192, 255);
            border: 2px black solid;
        }
    
    </style>
</head>
<body>
    
    <header>  
        <h1 align="center">xx学院</h1>  
        <p align="center">欢迎来到: <ins>计算机学院</ins></p>  
        <hr> 
        <nav>  
            <ul type="none">  
                <li><a href="#">首页</a></li>  
                <li><a href="#">关于我们</a></li>  
                <li><a href="#">学生风采</a></li>  
                <li><a href="#">联系方式</a></li>  
            </ul>  
        </nav>  
    </header>  
    <hr>  
    <main>  
        <section>  
            <article>  
                <h3>文章标题</h3>  
                <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>  
                <br><br><br>
                <img src="./img_src/云中医校徽.jpg" alt="文章配图" width="200" height="200">  
                <p>xx学院<a href="https://gdyfvccm.edu.cn/">点击这里</a></p>  
            </article>  

    
            <aside>  
                <h3>侧边栏</h3>  
                <p>侧边栏内容，如快速链接、广告等。</p>  
                <table border="1">  
                    <tr>  
                        <th>专业</th>  
                        <th>链接</th>  
                    </tr>  
                    <tr>  
                        <td>计算机应用技术</td>  
                        <td><a href="专业A详情页.html">专业A详情</a></td>  
                    </tr>  
                    <tr>  
                        <td>数字媒体技术</td>  
                        <td><a href="专业B详情页.html">专业B详情</a></td>  
                    </tr>  
                </table>  
            </aside>  

            <div style="clear: both;"></div>
        </section>  
    
        <section id="contact">  
            <h4>联系我们</h4>  
            <form>  
                姓名:
                <input type="text" id="name" name="name"><br>  
                邮箱:
                <input type="email" id="email" name="email"><br>  
                <input type="submit" value="提交">  
            </form>  
        </section>  
    </main>  
    <hr>  
    <footer>  
        <p>版权所有 &copy; 2024 xx学院</p>  
    </footer>  
  
</body>
</html>

三列布局

<style>
    
#div1{
    width: 10%;
    height: 800px;
    background-color: green;
    float: left;
}
#div2{
    width: 10%;
    height: 800px;
    background-color: red;
    float: right;
}
#div3{
    width: 75%;
    height: 800px;
    background-color: blue;
    /* float: left; */
    margin-left: 12%;
    margin-right: 12%;
}

footer{
    width: 100%;
    height: 50px;
    text-align: center;
    background-color: aquamarine;
  
}
.clear_ele::after{
            content: "";  /* 这个伪元素的内容属性必须有 */
            display: block; 
            /* border: 6px purple dashed; */
            clear: both;
        } 
</style>
<body>
    <section class="clear_ele">
    <div id="div1">1</div>
    <div  id="div2">2</div>
    <div  id="div3">3</div>
</section>
<footer>
    页尾
</footer>
</body>
</html>

多行多列布局

 <style>
    section{
        width: 90%;
        background-color: gray;
        border: 2px black solid;
        position: absolute;
        left: 10%;
        top: 5%;

    }
div{
    width: 15%;
    height: 100px;
    background-color: green;
    float: left;
    margin-right: 12%;
    margin-bottom: 12%;
}





/*实际工程项目开发中用解决高度塌陷的问题伪元素选择器*/
.clear_ele::after{
content: "";
clear: both;
display: block;
}

</style>
</head>
<body>
    <section class="clear_ele">
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
    </section>
</body>
</html>

运行结果：