解决float浮动带来的父元素高度没有的问题---清除浮动

时间：2015-01-12 16:33:45 阅读：130 评论：0 收藏：0 [点我收藏+]

float的特性：

1：使元素block块级化；

2：破坏性造成的紧密排列特性。

基于以上的特性，使得我们通常把浮动用来布局，带来的问题是，容易出问题，重用性不行，ie6-的版本下很多问题，因为它是要求固定的宽度，宽度计算错误就会带来整个布局的错乱。
float属性出现的初衷是为了让文字环绕图片实现图文混排的效果和应用于流体布局，所以float浮动带来的父元素高度没有的问题并不是我们说的是一个 BUG，这本身就是float的特性。

以下是解决float浮动带来的父元素高度没有的问题

测试为IE5+
1：在父元素的里面浮动元素的后面添加一个样式为clear:both;的元素；缺点是添加了无用的标签元素；
.clear{ clear:both; height:0px; font-size: 1px; line-height: 0px;overflow:hidden; }/* 清除浮动*/

2：给父元素添加伪类并给样式（.fix应用在包含浮动子元素的父元素上）
.fix:after{content:"";display: block;height: 0;overflow: hidden;clear: both;}
.fix{*zoom:1;} //兼容ie7以下
或者
.fix:after{content:"";display: table;clear: both;}
.fix{*zoom:1;}

3：直接给父元素添加一句样式：
父元素{overflow: hidden;}

解决float浮动带来的父元素高度没有的问题---清除浮动

标签：解决float浮动带来的父元素高度没有的清除浮动 bug

原文地址：http://blog.csdn.net/qianqianyixiao1/article/details/42643555

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

解决float浮动带来的父元素高度没有的问题---清除浮动

float的特性 ：

以下是解决float浮动带来的父元素高度没有的问题

float的特性：