
1、背景不能显示(overflow:hidden)。
由于浮动产生,如果对父级设置了(css background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。
2、边框不能撑开,如果父级设置了CSS边框属性,子级里使用了float属性产生浮动,父级不能被撑开。
3、margin padding设置值不能正确显示。
由于浮动导致父级子级之间设置css padding,css margin 属性的值不能正确表达,特别是上下边的padding和margin不能正确显示。
实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <head>
<style type= "text/css" >
*{ margin : 0 ; padding : 0 ;} //取消设置 如 li 留下的那个实点
ul{ width : 900px ; border : 3px dotted red ; list-style : none ; overflow : hidden ;}// overflow : hidden :让行高自适应
. left { width : 300px ; height : 300px ; background : #FF0 ; float : left ;} // float : left 设置浮动全部向左排
.chent{ width : 300px ; height : 300px ; background : #000 ; float : left }
. right { width : 300px ; height : 300px ; background : red ; float : left }
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
|
以上就是css浮动产生的负作用,希望对大家有所帮助。更多css学习指路:css教程
本文教程操作环境:windows7系统、css3版,DELL G3电脑。