首页 / CSS / css清除浮动的方法
css清除浮动的方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css清除浮动的方法,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2564字,纯文字阅读大概需要4分钟。
内容图文
![css清除浮动的方法](/upload/InfoBanner/zyjiaocheng/413/dd553e9fa45f468783aa3e211eb3b6f7.jpg)
float:left 左浮动
float:right 右浮动
float:none 不浮动
float:inherit 继承浮动(继承父元素浮动属性,如果父元素无浮动属性,inherit失效)
浮动产生哪些问题:1.父元素塌陷,没有高度。2.网页中的临近元素出现异位
清除浮动的几种方法:
1.手动给父元素添加高度 缺点:如果子元素过多且数量不确定,设置较为复杂。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>清除浮动</title> <style type="text/css"> /*给父级元素添加高度 */ *{ padding:0; margin:0; } .news { background-color: red; border: solid 1px black; height:200px; /*设置高度,如果去掉高度元素塌陷*/ } .news img { float: left; } .news p { float: right; } </style> </head> <body> <div> <img src="1.jpg" /> <p>some text</p> </div> </body> </html>
2.用clear属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>清除浮动</title> <style type="text/css"> /* 清除浮动 clear*/ *{ margin:0; padding:0; } .news { background-color: red; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .content{ clear:both;/*两边都清除浮动*/ } </style> </head> <body> <div> <img src="1.jpg" /> <p>some text</p> <div></div> </div> </body> </html>
3.给父元素添加overflow属性并结合zoom:1使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>清除浮动</title> <style type="text/css"> /* 给父级元素添加overflow:hidden; */ *{ margin:0; padding: 0; } .news { background-color: red; border: solid 1px black; overflow: hidden; /*溢出隐藏*/ zoom:1;/*兼容IE浏览器*/ } .news img { float: left; } .news p { float: right; } </style> </head> <body> <div> <img src="1.jpg" /> <p>some text</p> </div> </body> </html>
4.给父级元素添加浮动 缺点:相邻元素位置异常
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>清除浮动</title> <style type="text/css"> /* 给父级元素添加浮动 */ *{ margin:0; padding:0; } .news { background-color: red; border: solid 1px black; float: left; /* 给父级元素添加浮动 */ } .news img { float: left; } .news p { float: right; } </style> </head> <body> <div> <img src="1.jpg" /> <p>some text</p> </div> </body> </html>
5.使用:after伪元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>清除浮动</title> <style type="text/css"> /* 使用伪元素:after添加浮动 */ *{ margin:0; padding:0; } .news { background-color: red; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clearfix:after{ content: "\0020";/*在父容器的结尾处放一个空白字符*/ display: block; height: 0; /*让这个空白字符不显示出来*/ clear: both; } /* 兼容IE6和IE7,触发haslayout */ .clearfix{ zoom:1; } </style> </head> <body> <div class="news clearfix"> <img src="1.jpg" /> <p>some text</p> </div> </body> </html>
以上就是css清除浮动的方法的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的css清除浮动的方法全部内容,希望文章能够帮你解决css清除浮动的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。