清除浮动的四种方式

本文介绍了四种常见的CSS清除浮动的方法,包括设置固定高度、添加空div、使用overflow:hidden和使用伪元素清除。这些方法旨在解决因子元素浮动导致的父元素高度塌陷问题,确保页面布局的正常显示。通过示例代码详细展示了每种方法的实现方式。
摘要由CSDN通过智能技术生成

源代码

<style>
        *{
            margin: 0;
        }
        #father{
            border: 1px dashed black;
        }
        div div{
            width: 100px;
            height: 50px;
            border: 1px solid black;
            background-color: red;
            display: inline-block;
        }
        .layer1{
            float: left;
        }
        .layer2{
            float: left;
        }
        .layer3{
            float: right;
        }
        .layer4{
            float: right;
        }
    </style>
</head>
<body>
    <div id="father">
        <div class="layer1"></div>
        <div class="layer2"></div>
        <div class="layer3"></div>
        <div class="layer4"></div>
    </div>
</body>

没有清除浮动的效果(父元素坍塌了)


第一种清除浮动的方法

给父元素增加一个height,元素有了固定的高度就会被限制

#father{
            height: 300px;
        }


第二种清除浮动的方法

在所浮动的盒子下添加一个空的div,给它设置一个清除浮动(不推荐使用,代码中尽量避免空的div)

.clear{
            clear: both;    //清除两侧浮动
        }
<div class="clear"></div>

 第三种清除浮动的方法

在父元素增加一个overflow:hidden属性(下拉场景避免使用)

#father{
    overflow: hidden;
}

 第四种清除浮动的方法

给父元素添加一个伪类(主流的清除浮动的方法,推荐使用,没有副作用)

content的引号里尽量不要有空格

#father::after{
            content: '';
            display: block;
            clear: both;
        }

清除浮动的效果

   


 如果对您起到了作用,可否点个赞

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值