【原创】html页面清除浮动的几种方法-优快云博客

本文总结了常见的清除浮动的方法，包括设置高度、使用clear属性、设置overflow属性及clearfix技巧，并通过实例代码展示了每种方法的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，来个demo，代码如下：

html:

1 <div class="cont">
2     <div class="cont1"></div>
3     <div class="cont2"></div>
4     <div class="cont3">你好,我是Mrxia</div>
5 </div>

View Code

css:

 1 .clearfix:after {
 2     visibility: hidden;
 3     display: block;
 4     font-size: 0;
 5     content: " ";
 6     clear: both;
 7     height: 0;
 8 }
 9 .clear{
10     clear:both;        
11 }
12 .cont{
13          border:1px solid #ddfe00;width:800px;
14 }
15 .cont1{
16     width:200px;height:100px;background:#ffce80;float:left;
17 }
18 .cont2{
19     width:200px;height:100px;background:#ccc;float:right;
20 }

View Code

效果图如下所示：

由于浮动的原因，父级元素cont不能被撑开，div.cont3与div.con1、div.cont2保持在了同一行。

清除浮动，常用方式有以下几种：

1.设置父元素的高度（局限性）

1 .cont{
2      height:102px;                   
3 }

2.使用css的clear属性

1 <div class="cont">
2     <div class="cont1"></div>
3     <div class="cont2"></div>
4     <div class="clear">你好,我是Mrxia</div>
5 </div>

3.设置父元素overflow属性（hidden/auto）

.cont{
     overflow:auto;
}

4.使用clearfix（原理还是css的clear属性）

1 <div class="cont clearfix">
2     <div class="cont1"></div>
3     <div class="cont2"></div>
4     <div>你好,我是Mrxia</div>
5 </div>

clearfix说明：目的是创建一个隐形的内容为空的块来为目标元素清除浮动。

清除浮动后效果，如下图所示：

以上方法经笔者亲测可用，也是一点总结，欢迎大家多提看法、评论。

本文为原创，转载请注明出处！

转载于:https://www.cnblogs.com/mrxia/p/3573780.html