为什么要清除浮动以及怎么清除浮动？

男娘i 2021-11-02 05:08 399阅读 0赞

## 不清除浮动的后果 ##

HTML结构如下：

<div class="topDiv">
    		<div class="textDiv">文本信息</div>
    		<div class="floatDiv">浮动元素</div>
    	</div>
    	<div class="bottomDiv">
    		底部元素
    	</div>

CSS样式:

.topDiv{ 
    	width: 500px;
    	border: 2px solid black;
    	/* 清除浮动 */
    	/* overflow: hidden; */
    }
    .floatDiv{ 
    	width: 100px;
    	height: 100px;
    	border: 2px dotted red;
    	color: red;
    	margin: 4px;
    	float: left;
    }
    .textDiv{ 
    	color: blue;
    	border: 2px solid blue;
    	/*.textDiv告诉浏览器，我左边不允许有浮动元素的存在，清除左边的浮动元素*/ 
    	/* clear: left; */
    }
    .bottomDiv{ 
    	width: 500px;
    	height: 100px;
    	margin: 5px 0;
    	border: 2px solid black;
    }
    /* .topDiv::after{ display: block; height: 0; content: "."; clear: both; } */

此时的效果为：  
![在这里插入图片描述][20190810101540784.png]  
本来的理想效果应该是浮动元素撑开上面的容器，然而并没有，这就是浮动的影响。

## 清除浮动的方法 ##

1.  利用clear样式，指定某个元素的某边不能有浮动元素
2.  在父元素结束标签之前插入空的块级元素设置：clear:both
3.  利用伪元素清除浮动（::after,::before等）
4.  利用overflow清除浮动（设定除visible以外的任何有效值都可以，一般设置为hidden）

##### 原理为触发了BFC（块格式化上下文，即块级元素的布局规范） #####

[20190810101540784.png]: /images/20211102/263c0062f1954eb981d7cd1594b9efea.png

发表评论取消回复

表情：

评论列表（有 0 条评论，399人围观）

还没有评论，来说两句吧...

相关阅读

相关清除浮动

清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的情况。清除浮动的方法有很多种，这里我只写被大家推荐切常用的方法。 1、父级添加伪类 // htm

柔光的暖阳◎/ 2023年08月17日 17:39/ 0 赞/ 140 阅读

相关 css为何要清除浮动及清除浮动的方法

一：css为何要清除浮动 1.很多情况下，如果我们使用了float特效，出现margin，padding设置不能正确显示，浮动会导致父级子级之间设置了padding，导致了

古城微笑少年丶/ 2023年07月24日 09:15/ 0 赞/ 30 阅读

相关清除浮动有哪些方法？为什么要清除浮动？

什么是清除浮动？清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。为什么要清除浮动？ 1. 导致背景不能正常显示，如果对父级设置了背景属性，导致父级不

迈不过友情╰/ 2023年01月18日 13:24/ 0 赞/ 190 阅读

相关 CSS浮动以及清除浮动float

float设定浮动 > 浮动的元素脱离标准流（文档流），相当于飘浮起来了，会释放原先占有的位置，位置不再保留，浮动的元素都具有行内块元素的特性，浮动的盒子只会影响后面的标

女爷i/ 2023年01月18日 06:38/ 0 赞/ 171 阅读

相关前端高频面试题：CSS为什么要清除浮动？如何清除浮动？

CSS为什么要清除浮动？如何清除浮动？由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。清除浮动的

向右看齐/ 2022年10月31日 00:53/ 0 赞/ 165 阅读

相关浮动以及清除浮动

文章目录浮动浮动特征浮动会脱离文档浮动可以内联排列浮动会导致父元素高度坍塌

悠悠/ 2022年10月22日 15:47/ 0 赞/ 296 阅读

相关为什么要清除浮动以及怎么清除浮动？

不清除浮动的后果 HTML结构如下： <div class="topDiv"> <div class="textDiv">文本信息</div>

男娘i/ 2021年11月02日 05:08/ 0 赞/ 400 阅读

相关浮动+清除浮动

界面布局 1.企业开发中什么时候使用标准流什么时候使用浮动流？垂直方向使用标准流，水平方向使用浮动流。 2.拿到一个很复杂的界面如何入手？从上至下布局、从

待我称王封你为后i/ 2021年10月30日 06:54/ 0 赞/ 558 阅读

相关清除浮动

1.给父元素加溢出处理 overflow:hide 2.定义一个空元素，添加clear属性 3.结合伪元素after

た入场券/ 2021年09月14日 08:26/ 0 赞/ 403 阅读

相关 css为什么要清除浮动？浮动如何清除

浮动在页面中有着很大的作用，很多人在做网站的时候，都会遇到浮动的效果，但是很多人都不知道css为什么要清除浮动？以及浮动如何清除？下面我们来了解一下。

红太狼/ 2021年01月28日 16:38/ 0 赞/ 864 阅读