CSS清除浮动的方法以及优缺点

最新推荐文章于 2023-02-01 07:50:27 发布

奶思旺仔

最新推荐文章于 2023-02-01 07:50:27 发布

阅读量316

点赞数 1

文章标签： css

原文链接：https://juejin.im/post/5d6f2b845188250587727971

版权

本文详细介绍了五种常见的CSS清除浮动方法及其优缺点，包括通过设置父元素高度、使用clear:both、利用bfc原理、伪类清除及overflow属性，帮助开发者理解和选择最适合的清除浮动策略。

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

CSS清除浮动的方法以及优缺点

height：父元素设置高度

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
```
/* 高度清除浮动 */
  div{
      height: 300px;
  }
```
clear:both;: 父元素内尾部加额外块标签，并设置clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：为了清除浮动，额外增加一个块级标签
```
/*结尾处添加空的div*/
    .div{
        clear:both;
        height:0;
        overflow:hidden;
    }  
```
overflow:hidden：利用bfc原理来清除浮动
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：清除浮动非常简单，但是会溢出隐藏。
```
/* 利用bfc机制清除浮动 */
	ul{
	    overflow: hidden;
	}
```

::after：使用伪类清除浮动
优点：不需要额外增加标签，也不会导致溢出隐藏，
缺点：但代码实习有些多，E8以上和非IE浏览器才支持:after

/* 伪类清除浮动 */
	ul::after{
	    display: block;
	    content: " ";
	    clear: both;
	    font-size: 0;
	    visibility: hidden;
	    height: 0;
	    line-height: 0;
	}

overflow:auto
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
```
	div{
    /*overflow：auto清除浮动*/
    overflow: auto;
} 
```

父级div 也一起浮动
原理：所有代码一起浮动，就变成了一个整体
优点：没有优点
缺点：会产生新的浮动问题

    <style type="text/css"> 
        .div1{
        background:#000;
        width:60%;
        float:left
        } 
        .div2{
        background:#000;
        height:100px;
        width:100%;
        clear:both} 
        .left{
        float:left;
        width:20%;
        height:200px;
        background:red;
        } 
    </style> 
        <div class="div1"> 
            <div class="left">Left</div> 
        </div> 
        <div class="div2"> 
            div2 
        </div>

父级div定义 display:table
原理：将div属性变成表格
优点：没有优点
缺点：会产生新的未知问题
```
 .div{
	display:table
} 
```
结尾处加 br标签 clear:both
原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both
```
div{
	zoom:1;
}
br{
clear:both;
}
```