CSS中浮动的产生会有什么负面影响
Admin 2022-05-26 群英技术资讯 346 次浏览
1、背景不能显示(overflow:hidden)。
由于浮动产生,如果对父级设置了(css background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。
2、边框不能撑开,如果父级设置了CSS边框属性,子级里使用了float属性产生浮动,父级不能被撑开。
3、margin padding设置值不能正确显示。
由于浮动导致父级子级之间设置css padding,css margin 属性的值不能正确表达,特别是上下边的padding和margin不能正确显示。
实例
<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>
本文教程操作环境:windows7系统、css3版,DELL G3电脑。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍了CSS transform-origin属性的理解,详细的介绍了CSS transform-origin属性的作用及其实践,非常具有实用价值,需要的朋友可以参考下
在各种网站上我们都能看到轮播图的应用,轮播图的设计和实现方法也有很多,之前我们也了解过不少,这篇继续给大家分享轮播图的实现方法,这里主要是使用使用纯CSS3实现轮播图。感兴趣的朋友就继续往下看吧。
由于最近在做一些边框按钮的阴影效果用到了box-shadow属性,发现这个阴影效果的css属性真的很值得学习,特地网上学习了一下box-shadow属性。 一.box-shadow的定义和语法 定义: box-shadow是css3新增的一个属性。在W3School里,定义box-shadow是向框添加一个
这篇文章主要介绍了AmazeUI 列表的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
这篇文章主要介绍了 html+css实现响应式卡片悬停效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008