您现在的位置是：课程教程文章
css浮动产生的负作用
2023-12-13 23:25课程教程文章 人已围观
Web前端HTML5+CSS3进阶
Web前端HTML5+CSS3进阶获取课件直接添加博学谷微信号：bxgcourse；也可以直接加入博学谷在线学习交流...-
微信小程序动画课程 通过wxss(css)来实现
微信小程序动画课程 通过wxss(css)来实现微信小程序培训班（适合零基础和非iT计算机行业） 黄菊华老师QQ（微信同号）... -
HTML+CSS零基础入门（网页设计与制作）
HTML+CSS零基础入门（网页设计与制作）一、网页设计与策划 01 网页与网站的概念 02 网页核心技术(HTML/CSS/JAVASCRIPT)简介... -
WEB前端课程 div+Css视频教程 html基础教程
WEB前端课程 div+Css视频教程 html基础教程...
1、背景不能显示（overflow:hidden）。
由于浮动产生，如果对父级设置了(css background背景)CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开，如果父级设置了CSS边框属性，子级里使用了float属性产生浮动，父级不能被撑开。
3、margin padding设置值不能正确显示。
由于浮动导致父级子级之间设置css padding，css margin 属性的值不能正确表达，特别是上下边的padding和margin不能正确显示。
实例
<head>
<styletype="text/css">
*{margin:0;padding:0;}//取消设置如li留下的那个实点
ul{width:900px;border:3pxdottedred;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电脑。
课程教程：css浮动产生的负作用上一篇：css盒子模型的属性介绍
下一篇：没有了
