今天在做两栏布局的自适应时(左边定义宽度,高度自适应,右边高度和宽度都自适应),左栏定义了左浮动,右栏没有定义浮动,只是采用外补丁的左边距来定位,以前只是知道左边要浮动,右边非浮动时两个层之间就会出现这个3px bug,结果发现那个3px bug没有出现(这时右栏没有定义宽度),所以就调试了调试,看看哪种情况下3px的bug会出现,便有了以下结论:
产生条件:当一个浮动元素相邻的非浮动元素没有指定具体的高度或者宽度时,非浮动元素中的内容会和浮动元素的边界产生3px的空隙,这个空隙只沿着浮动元素显示,当浮动终止时,文本就恢复正常了,如果非浮动元素指定具体的宽度或者高度,这个时候非浮动元素和浮动元素就出现了3px的空隙
更多信息请查看IT技术专栏