css的浮动以及如何清除浮动

2024-12-31 11:03:55
推荐回答(2个)
回答1:

CSS清除浮动的3种方法,参考:http://www.apiref.com/css-zh/experience/skill.htm#no9

方法1:

#test{clear:both;}

#test为浮动元素的下一个兄弟元素

方法2:

#test{display:block;zoom:1;overflow:hidden;}

#test为浮动元素的父元素。zoom:1也可以替换为固定的width或height

方法3:

#test{zoom:1;}#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}

#test为浮动元素的父元素

回答2:

浮动分为左浮动 float:left; 和右浮动 float:right;
标签添加浮动之后会对后面的元素及父级元素产生影响如父级高度塌陷,为了清除浮动影响主要有三种方式:
第一个是父级添加overflow属性;
第二个是在浮动标签后添加一个空标签,该空标签添加clear属性清除浮动;
第三个利用伪元素after,添加clear属性,原理和插入空标签类似;
望采纳,谢谢