什么时候需要清除浮动,清除浮动都有哪些方法

**今天做项目的时候感觉对清除浮动有点模糊,整理如下:**
浮动float最开始出现的意义是为了让文字环绕图片而已,后来用于让三个块级元素并排展示,这时候就出现了浮动

不过,由于float会导致浮动元素的父元素高度坍塌,所以,这时候就要去清除浮动

如果我们给上面的三个绿颜色的方块设置display:inline-block也能达到让它们并排显示的效果。并且父元素的高度也不会塌陷。只不过无法控制是居左还是居右,display:inline-block只能从左往右。

清除浮动的方法:

(1) 在浮动元素最后增加一个冗余元素为其设置 clear:both

(2) 给父元素增加 clearfix

<div class="box clearfix">

<div class="div"></div>

</div>

.clearfix:after{
content: '';
display: table;
clear: both;
}
(3) 给父元素增加:

overflow:hidden;
zoom:1;
给父元素增加 overflow: hidden; 可以清除浮动的原理:

增加后,父元素会形成一个块级格式化上下文,即BFC,overflow: hidden本意是将父元素中溢出的内容裁切掉,而BFC中,在计算父元素真实高度时候,也把float元素的高度算入其中,所以在计算裁切的同时,顺带达成了清除浮动的目的

BFC块级格式化上下文有以下特征:

内部的Box会在垂直方向,从顶部开始一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box叠加。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
计算BFC的高度时,浮动元素也参与计算。

不单单只有给父元素添加overflow:hidden才可以创建块级格式化上下文,下列方法都可以:

浮动 (元素的 float不为 none)
绝对定位元素 (元素的 position为 absolute 或 fixed)
行内块 inline-blocks (元素的 display: inline-block)
表格单元格 (元素的 display: table-cell,HTML表格单元格默认属性)
表格标题 (元素的 display: table-caption,HTML表格标题默认属性)
overflow的值不为 visible的元素
弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)

原文地址:https://www.cnblogs.com/zhushuaiqi/p/11943451.html