为何需要清除浮动,以及清除浮动的方式

如题,介绍为何需要清除浮动?浮动的影响是怎么产生的?以及清除浮动的方式。

为什么要清除浮动?

当元素有浮动属性时,高度会坍塌,高度的坍塌会对其父元素或后面的元素产生影响,出现布局错乱的现象,可以通过清除浮动的方法来解决。

浮动的影响是怎么产生的?

浮动是将块元素独占一行的属性取消,允许其它元素与它在同一行,其核心就是使这个块从原来的文档流模式中分离出来,它后面 大专栏  为何需要清除浮动,以及清除浮动的方式的对象就视它不存在,浮动元素的高度不能撑起父元素的高度,也就出现了高度坍塌。

清除浮动的方式

1、给父级div定义高度height
2、父级div设置overflow:hidden;
3、利用伪对象after方法,作用于浮动元素的父级

.clearFix:after{
    clear:both;
    display:block;
    height:0;
    content:"";
}
.clearFix{zoom:1;}

zoom:1的原理:当设置了zoom的值之后,所设置的元素就会扩大或缩小,高度宽度就会重新计算,这里一旦改变zoom值是其实也会发生重新渲染。
4、底部加一个空的div

<div class="clear"></div>
.clear{clear:both;}
原文地址:https://www.cnblogs.com/lijianming180/p/12247661.html