css清除浮动

最新推荐文章于 2024-08-16 16:28:57 发布

叆-叇

最新推荐文章于 2024-08-16 16:28:57 发布

阅读量49

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_54481824/article/details/113259065

版权

css清除浮动

语法：

选择器 {clear:left/right/both}

left表示不允许左侧有浮动元素；
right表示不允许右侧有浮动元素；
both表示清除两端的浮动影响；
实际工作中几乎只用clear：both；

1.额外标签法：
在浮动标签末尾添加一个空的标签。
例如：

<style>
    div li {
        list-style: none;
    }
    
    .clear {
        clear: both;
    }
    
    .box {
        width: 1200px;
        background-color: powderblue;
        margin: 0 auto;
        border: 1px solid blue;
    }
    
    .box2 {
        width: 1200px;
        background-color: purple;
        margin: 0 auto;
    }
    
    .charactor1 {
        float: left;
        background-color: pink;
        height: 150px;
        width: 400px;
    }
    
    .charactor2 {
        float: left;
        background-color: black;
        height: 150px;
        width: 400px;
    }
</style>

<body>
    <div class="box">
        <li class="charactor1">1</li>
        <li class="charactor2">2</li>
        <li class="clear"></li>
    </div>
    <div class="box2"></div>
</body>

运行结果：
在这里插入图片描述
优点：通俗易懂，书写方便；
缺点：添加许多标签，结构混乱；

2.给父级添加overflow：
只需要找到父级标签的类，在类中添加：

overflow:hidden;

即可

<style>
    div li {
        list-style: none;
    }
    
    .box {
        overflow: hidden;
        width: 1200px;
        background-color: powderblue;
        margin: 0 auto;
        border: 1px solid blue;
    }
    
    .box2 {
        width: 1200px;
        height: 100px;
        background-color: purple;
        margin: 0 auto;
    }
    
    .charactor1 {
        float: left;
        background-color: pink;
        height: 150px;
        width: 400px;
    }
    
    .charactor2 {
        float: left;
        background-color: black;
        height: 150px;
        width: 400px;
    }
</style>

<body>
    <div class="box">
        <li class="charactor1">1</li>
        <li class="charactor2">2</li>
    </div>
    <div class="box2"></div>
</body>

运行结果：
在这里插入图片描述
还有两种其他方法：
（1）after伪元素法
（2）双伪元素清除浮动

这两种方法仅限了解接可。

叆-叇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css清除浮动

清除浮动语法：选择器 {clear:left/right/both}left表示不允许左侧有浮动元素；right表示不允许右侧有浮动元素；both表示清除两端的浮动影响；实际工作中几乎只用clear：both；1.额外标签法：在浮动标签末尾添加一个空的标签。例如：<style> div li { list-style: none; } .clear { clear: both; }
复制链接

扫一扫