日期:2014-05-17  浏览次数:20561 次

css总结之float、clear
解释
float:none|left|right none为默认值
指定对象浮动的位子
clear:none|left|right|both  none为默认值
清除浮动的对象的边

如果用浮动,就一定要在用完的时候清除浮动

引入clear后IE和FF的高度变化解决方法
加入<div class="clear"></div>后引起IE和FF高度变化,通过如下方法解决:
.clear{
    clear:both;
    height:1px;
    margin-top:-1px;
    overflow:hidden;
}

一些浮动的问题及解决
1、推倒:突破伸出主内容之外把侧栏推到下面。解决:确保不是图片造成这种情况,使用 overflow:hidden 来切除多余的部分
2、双倍边距bug处理 IE6 时,另一个需要记住的事情是,如果在和浮动方向相同的方向上设置外边距(margin),会引发双倍边距。快速修正:给浮动设置 display:inline; 而且不用担心,它依然是块级元素。
3、3像素间距是指挨着浮动元素的文本会神奇的被踢出去3像素,好像浮动元素的周围有一个奇怪的力场一样。快速修正:在受影响的文本上设置宽度或高度
4、IE7 中,底边距 bug是当浮动父元素有浮动子元素时,这些子元素的底边距会被父元素忽略掉。快速修正:用父元素的底内补白(padding)代替。