清除浮动元素造成父元素高度的影响的解决方法

最新推荐文章于 2022-09-14 15:18:03 发布

riverrun_z

最新推荐文章于 2022-09-14 15:18:03 发布

阅读量389

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/weixin_48047636/article/details/124429484

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS

 <style>
        .main{
            width: 500px;
            /* 6.先去掉高度 */
            /* height: 300px; */
            background-color: violet;
            overflow: hidden
        }
        .c1{
            width: 100px;
            height: 100px;
            background-color: thistle;
            /* 1.浮动以后元素会脱离文档流
               脱离文档流之后空间就会释放,然后在下面的元素就会上去
               然后被上面的元素覆盖掉
            */
            /*
             2.如果让第二个元素也左浮,先写的div先浮,后写的跟在后边浮  
            */
            /* 6.先不浮动 */
            /* float: left; */
             /* 4.如果两个元素都右浮,先写的先浮,后写的跟在后面浮*/
            float: right;
        }
        .c2{
            height: 100px;
            width: 100px;
            background-color: teal;
            /*
             2.如果让第二个元素也左浮,先写的div先浮,后写的跟在后边浮  
            */
            float: left;

            /* 3.如果第2个写的div右浮,div1在左,div2在右 */
            /* float: right; */
            /* 4.如果两个元素都右浮,先写的先浮,后写的跟在后面浮*/
            /* 6.先不浮动 */
            /* float: right; */
        }
        p{
            background-color: black;
            color: #fff;
             /*  5.由于上面写的div浮动后会脱离文档流释放空间
             所以会导致div不占空间后,p标签跑了上去
             解决方法:使用clear:both/right/left用了什么浮动就用什么clear值 但是直接用both也可以,因为只用了left或right浮动,clear:both也有效 ;*/
             /* 注意,clear属性值要写在不想让元素跑到使用了浮动的地方的元素 */
             /* clear: both; */
        }
        .clear{
            clear: both;
        }
    </style>

HTML

<body>
    <div class="main">
        <div class="c1"></div>
        <div class="c2"></div>
        <!-- 5.由于上面写的div浮动后会脱离文档流释放空间
        所以会导致div不占空间后,p标签跑了上去
        -->
        <!-- 6.如果这里没有p标签 -->
        <!-- <p>我是 p标签</p> -->
        <!-- 6.由于去掉高度以后再进行浮动,会导致main完全失去高度
        这时可以在两个浮动的div后面再加一个没有高度但是有清除浮动属性的div
        这个方法就是解决父级高度坍塌的经典解决方法 就是在父元素的最后位置增加一个
        带有clear属性的子元素
        -->
        <!-- <div class="clear"></div> -->
        <table></table>
    </div>
</body>

效果

在这里插入图片描述

总结–清除浮动元素造成父元素高度的影响的解决方法

给父元素加overflow:hidden
在父元素最后的位置增加一个样式为clear:both的子元素
在父元素最后一个位置写一个空格标签
手动设置父元素高度

riverrun_z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动元素造成父元素高度的影响的解决方法

CSS <style> .main{ width: 500px; /* 6.先去掉高度 */ /* height: 300px; */ background-color: violet; overflow: hidden } .c1{ width: 100px; height: 1
复制链接

扫一扫

专栏目录