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

男娘i 2021-11-02 05:08 329阅读 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 条评论，329人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关浮动以及清除浮动

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

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

相关清除浮动

.clear\{clear:both;height:0;overflow:hidden;\} 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear，我们知

清疚/ 2022年06月09日 12:50/ 0 赞/ 226 阅读

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

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

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

相关浮动+清除浮动

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

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

相关清除浮动

通常清除浮动的方法： 1.添加一个空的div。clear：both 缺点：如果页面用了太多的浮动，结构就冗杂。 2.给父元素添加：overflow：auto；缺点：不

爱被打了一巴掌/ 2021年09月30日 03:52/ 0 赞/ 315 阅读

相关清除浮动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Myth丶恋晨/ 2021年09月14日 07:48/ 0 赞/ 333 阅读

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

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

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