首页 > 代码库 > 解决float浮动带来的父元素高度没有的问题---清除浮动
解决float浮动带来的父元素高度没有的问题---清除浮动
float的特性 ：
1：使元素block块级化；
2：破坏性造成的紧密排列特性。
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浮动带来的父元素高度没有的问题---清除浮动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。