css清楚浮动的四种方式

最新推荐文章于 2022-12-29 21:54:45 发布

辉娜

最新推荐文章于 2022-12-29 21:54:45 发布

阅读量75

点赞数

分类专栏： css 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_44211097/article/details/120847297

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、父元素设置overflow:hidden

<style>
        .outer {
            background-color: cornflowerblue;
            /* 父元素设置这个属性 */
            overflow: hidden;
        }
        
        .inner {
            width: 150px;
            height: 150px;
            background-color: yellowgreen;
            opacity: 0.5;
            float: left;
        }
</style>

<body>
    <div class="outer">
        <div class="inner">
            我是子元素
        </div>
    </div>
</body>

二、添加一个块无意义的标签块

<style>
        .outer {
            background-color: cornflowerblue;
        }
        
        .inner {
            width: 150px;
            height: 150px;
            background-color: yellowgreen;
            opacity: 0.5;
            float: left;
        }
</style>


<body>
    <div class="outer">
        <div class="inner"></div>
        <!-- 添加一个块 -->
        <div style="clear: both;"></div>
    </div>
</body>

三、父级添加伪类

<style>
        .outer {
            /* width: 300px; */
            background-color: cornflowerblue;
        }
        /* 父级伪类 */
        .outer::after {
            content: "";
            display: block;
            clear: both;
        }
        
        .inner {
            width: 150px;
            height: 150px;
            background-color: yellowgreen;
            opacity: 0.5;
            float: left;
        }
</style>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

四、父级设置一个高度

辉娜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css清楚浮动的四种方式

一、父元素设置overflow:hidden<style> .outer { background-color: cornflowerblue; /* 父元素设置这个属性 */ overflow: hidden; } .inner { width: 150px; height: 150px; .
复制链接

扫一扫