个人关于css中几种取消浮动对于其他元素影响的见解

1、直接给父级元素添加高度

   div可以直接定义width和height，且因为div为块级元素会直接占用其高度所在的行，无法并排存放第二个div。若该div不定义初始高度，则他的高度和宽度由该div中嵌套的元素大小决定，可能是文本元素或者是非文本元素。换一种说法也就是因为使用的是div且没有脱离标准文档流，变会按照块级元素方式进行排列。

而若此时子元素中定义了float:left;则该子元素便会脱离标准文档流，不在受到约束。那么，这个时候如果父级元素没有定义width和height时，该定义了浮动的元素就会对父级元素中的其他元素发生干扰。

这种方式比较简单可行，但是因为在实际的网页设计中会有许多变动，父级元素的格式不是一成不变的，这种方式不容易优化，不推荐在大型工程中使用。

2、使用overflow:hidden

这种方式是目前使用最广泛，也是最多的一种。在很多工程中都能见到这种清除浮动对其他元素影响的方式。看这个代码的后面是hidden，顾名思义就是隐藏的意思。那么它到底是隐藏了什么呢？按照术语来说，它是隐藏了溢出的元素。

这张图片就是一个很好的例子，其中只有一个父级元素和子元素，子元素内有一行字和一张图片，并且设置为左浮动已经脱离标准文档流，因为文本的书写在图片格式的前面，而且两个盒子均没有定义高度。所以，绿色边框的子元素就这样分布。因为父盒子无法判断是应该以绿色边框作为内容来设置宽高还是根据图片来设置宽高就GG了。

而当父盒子定义了overflow:hidden; 后，父盒子就可以将溢出的部分直接隐藏只显示在父盒子内部的部分，父盒子也能正确的确定宽高，就目前博客主知识储备，在网站轮播图使用为比较典型的例子。也是比较完善的一种方式，没有太大缺陷。

3、通过给父元素以及子元素均产生浮动来消除子元素的浮动对父元素内部其他元素的影响

可能有的人觉得这种方法很好，既不会影响子元素和父元素内部元素之间的排列，还能设置子盒子和父盒子的高度和宽的岂不两全其美？但是这只是因为这里只有两个盒子。如果是3个元素依次嵌套的话，情况就会发生变化。

这是三个盒子嵌套的情况，三个div均没有设置宽度和高度，最小的div高度由它的文本元素决定。以上的两个div大小由它的子元素和自身的元素构成，接下来先给最小的div使用float:left;

此时，最小的盒子脱离了标准文档流，不再受到以上两个标准文档流文件的约束，接下来继续给内部div使用float:left;

此时两个脱离标准文档流的元素之间的嵌套生效，爸爸和儿子之间恢复了正常的排列方式，这两个盒子成功消除了浮动的影响，但是爷爷的内部元素仍然受到了浮动的影响，继续给爷爷使用浮动

此时虽然还是成功的完成了三个div的嵌套，但是排列方式已经发生了改变。所以，除非盒子比较少，不然这种清除浮动影响的方式慎用。