css清除浮动的原理,css清除浮动方法及优缺点解析_蓝戒的博客

我是div2

原理及有优缺点同方法1，可做了解，亦不推荐使用。

方法三：父元素设置 overflow:hidden;zoom:1

.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}

.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

Left

Right

div2

原理：通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout(zoom：1)

优点：代码简介，不存在结构和语义化问题

缺点：无法显示需要溢出的元素(亦不太推荐使用)

方法四：父元素设置 overflow:hidden;zoom:1

原理：原理同方法6，在IE6中还需要触发 hasLayout(zoom：1)

优点：代码简介，不存在结构和语义化问题

缺点：firefox早期版本会无故产生focus，多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等。

方法五：给父级div定义 高度

代码如下：

.div1{background:#000;border:1px solid red; /*解决代码*/height:200px;}

.div2{background:#f00;border:1px solid red;height:100px;margin-top:10px}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:70%;height:80px;background:#DDD}

< /style>

我是左浮动

我是右浮动

我是div2

原理：给父级DIV定义固定高度(height)，能解决父级DIV 无法获取高度得问题。

优点：代码简洁

缺点：高度被固定死了，是适合内容固定不变的模块。(不推荐使用)

方法六：父级div定义display:table

.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;}

.div2{background:#800080;border:1px solid red;height:100px;width:98%;}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

Left

Right

div2

原理：将div属性强制变成表格

优点：无

缺点：会产生新的未知问题。(不推荐使用)

方法七：让父级div 也一并浮起来这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。 不推荐使用

方法八：父级div定义 伪类:after 和 zoom

代码如下：

.div1{background:#000;border:1px solid red; /*解决代码*/overflow:hidden;zoom:1}

.div2{background:#f00;border:1px solid red;height:100px;margin-top:10px}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:70%;height:80px;background:#DDD}

.clearfix:after { content: “.”;display: block;height: 0;clear: both;visibility: hidden; }

.clearfix {zoom:1;}

我是左浮动

我是右浮动

我是div2

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：结构和语义化完全正确,代码量也适中，可重复利用率(建议定义公共类)

缺点：代码不是非常简洁(极力推荐使用)