1. 给盒子增加适当高度
当一个浮动元素被包含在另一个元素中,包含的元素没有高度就会被另外的浮动元素影响,如果这个和另一个元素有高度的话,浮动元素就不会互相受影响。
2 .清除法clear
清除的属性有clear:left;清除左边的浮动),clear:right;(清除右边的浮动),clear:both;(清除所有浮动),clear:none;(默认状态)。
用清除法会导致元素的外边距(margin)属性无法使用,会影响网页的效果。
3 .隔墙法
内墙法
在想要互不影响的两个浮动元素中的第一个元素的里面写一个小的元素,给上适当的高度,就会将前一个元素撑高,这样两个元素就不会互相影响。
对于IE6会不兼容微型盒子,即高度小于12px的盒子,解决方式是将盒子的font-size设置为比想要所设置的盒子的高度小就可以啦并且font-size的表示方法如
_font-size:0px;
。外墙法
在两个好像影响的浮动元素之间 ,建一个盒子,就可以将两部分的浮动元素隔开,两部分的浮动就不会相互影响。两部分的间隙就是外墙的高度。这种方法的缺点是前一个包含框不会适应内容的高度。 内墙法会适应高度。overflow:hidden;(IE6不支持,如果要使用需要配合使用
_zoom:1;
)
作用1:将溢出包含框的内容隐藏。
作用2:清除浮动,并且元素的高会适应内容,margin可以使用。