HTML+CSS 浮动塌陷问题

最新推荐文章于 2024-07-24 13:52:24 发布

发际线预备队

最新推荐文章于 2024-07-24 13:52:24 发布

阅读量142

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_46204746/article/details/128405592

版权

                    
                        
                    
                    什么是浮动塌陷
 在文档流中，若父元素未设置高度，则父元素的高度默认是被子元素撑开的。当子元素设置浮动后，子 元素就会脱离文档流，但是父元素还在文档流中，此时父元素的高度就没有被子元素撑起，父元素下面的元素就会上去，导致页面布局混乱，这就是浮动塌陷。
解决方法 
  父元素结束之前添加一个标签。
 缺点：增加了无意义的标签<style>
    header{
        height: 100px;
        background-color: beige;
    }
    main{
        background-color: brown;
        min-height: 50px;
    }
    main .one{
        float: right;
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
    footer{
        height: 300px;
        background-color: aquamarine;
    }
</style>
<main>
    <div class="one"></div>
    <!-- 父元素结束前添加一个标签 -->
    <div style="clear:both"></div>
</main>
 
给父元素设置overflow: hidden; zoom: 1;<style>
    main{
        background-color: brown;
        min-height: 50px;
        overflow: hidden;
        zoom: 1;
    }
</style>
<main>
    <div class="one"></div>
</main>		
 
给父元素一个固定高度
给父元素设置display: inline-block;
 缺点：导致宽度丢失main{
    background-color: brown;
    display: inline-block;
}
 
after伪元素+zoom方法清除浮动，给父盒子的after伪元素设置clear属性。最推荐的方法<style>
    main{
        background-color: brown;
        zoom: 1;
    }
    main::after {
        content: ""; /* 生成内容作为最后一个元素*/
        display: block; /* 使生成的元素以块级元素显示，占满剩余空间*/
        height: 0; /* 避免生成的内容破坏原有空间的高度*/
        clear: both; /* 闭合浮动*/
        visibility: hidden; /* 使生成的内容不可见*/
    }
    main .one{
        float: right;
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
    footer{
        height: 300px;
        background-color: aquamarine;
    }
</style>
<body>
    <div class="container">
        <main>
            <div class="one"></div>
        </main>
        <footer></footer>
    </div>
</body>
 
 

                