CSS清除浮动(float)详解

一、浮动可能带来的后果

1.导致父元素崩塌：

浮动元素会脱离文档流，从而导致父元素塌陷，通俗的讲就是父元素没有被撑开。

代码实例：

在浏览器里的显示效果：

2.浮动对兄弟元素的影响：

对于兄弟元素的影响要分内联元素还是块级元素。

1）如果是块级元素，那么块级元素会尽可能的与浮动元素处于同一行，最常见的现象就是浮动元素覆盖此块级元素

2）如果是非块级元素，那么就会尽可能的围绕这个浮动元素

代码实例：1）

 

1）在浏览器中的效果：

2）把id为inner的div改为span在浏览器中的效果

span元素会环绕浮动的div元素不会被覆盖

 

二、清除浮动

1、清除浮动对兄弟元素的影响：

clear：both/right/left/none

分别表示清除在元素的左右两侧的影响、在元素右侧的影响、在元素左侧的影响、不清除浮动和继承父元素的浮动值

在浏览器中的显示：

clear属性的原理：

clear属性能够为元素增加额外足够的空白空间，能够使该元素位于它前一个浮动元素之下

 

2、消除浮动对父元素的影响

1）添加额外的元素

不推荐此方式，因为增加了额外的元素，有悖于表现和内容分离的原则。

 

2、overflow方式

此方式和第二种方式相比更加符合表现和内容分离的原则，没有增加额外的标签并且非常简单，不过overflow属性并不是为清除浮动所设计，

并且由于此属性可以隐藏超出的元素内容，可能会导致覆盖子元素的内容或者出现滚动条。

 

3、使用after伪对象选择器

此方式是一种比较完美的方式，不会增加额外的标签又可以重用

清除浮动后在浏览器中的显示