CSS中浮动float 高度自适应

作者：袖梨 2022-06-25

先来看一个示例效果的对比：

这是清除浮动之前的效果。可以明显看到column1,column2,column3这三个浮动元素的父级元素的高度并没有被撑开。

这就是我们所要达到的效果，可通过下面的三种方法来实现。

方法一：
在浮动层最后一个浮动元素的后面多加一个元素来清除浮动即可，这是最简单也是最直接的方法。唯一的缺点就是在一定程度上改变了文档流结构。
html代码：

代码如下	复制代码
column1 column2 column3

css代码：

代码如下	复制代码
#demo {border: 1px black dashed;} .column { float: left; padding: 10px 0; margin: 10px; width: 200px;} #c1 {border: 1px red dashed;} #c2 {border: 1px green dashed;} #c3 {border: 1px blue dashed;} .clear { clear:both;}

方法二：

此方法需要依赖于下面两行文档类型的声明:

代码如下	复制代码

css代码:

代码如下	复制代码
#demo {border: 1px black dashed;} .column { float: left; padding: 10px; margin: 10px; width: 200px;} #c1 {border: 1px red dashed;} #c2 {border: 1px green dashed;} #c3 {border: 1px blue dashed;} [xmlns] #demo {overflow:auto;} /* For IE7+ and non-IE / html #demo {height:1%; } /* IE only */

方法三：

非IE浏览器利用伪类 :after，IE浏览器利用其特有属性zoom。
css代码：

代码如下	复制代码
#demo {border: 1px black dashed; zoom: 1; /* IE only /} #demo:after { content: "."; display: block; clear: both; height: 0; font-size: 0; line-height: 0;} /IE8 and non-IE*/ .column { float: left; padding: 10px; margin: 10px; width: 200px;} #c1 {border: 1px red dashed;} #c2 {border: 1px green dashed;} #c3 {border: 1px blue dashed;}

overflow解决float浮动后高度自适应的问题

经发现可以采用overflow来解决！方法是在父元素加上如下代码即可：
overflow:auto;zoom:1;

“overflow:auto;”是让高度自适应，“zoom:1;”是为了兼容IE6，也可以用“height:1%;”来解决。

完整的代码如下：

代码如下

复制代码

float浮动之后的问题