浅谈CSS清除浮动
来源:互联网 发布:2016大学生就业率数据 编辑:程序博客网 时间:2024/06/05 03:22
1、为什么会出现浮动?
浮动的产生的最根本的原因是为了实现文字环绕效果。
2、什么时候需要清除浮动?
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷,而高度的塌陷使页面后面的布局不能正常显示,如背景色不能显示等。
清除浮动前:
清除浮动后:
3、清除浮动的方法:
(1)使用clear属性
使用空标签清除浮动:在需要清除浮动的父级元素内部的所有浮动元素后添加一个空标签(理论上可以是任何标签,但常用<div>和<p>)清除浮动,并为其定义CSS代码clear:both。
缺点:增加了无意义的结构元素。
<html><head><style type="text/css">#layout{background:red;}#left{float:left;width:20%;height:200px;background:blue;line-height:200px; }#right{float:right;width:30%;height:80px;background:yellow;line-height:80px;}#clear{clear:both;}</style></head><body><div id="layout"><div id="left">Left</div><div id="right">Right</div><div id="clear"></div></div></body></html>
(2)使用overflow属性
使用overflow清除浮动:只需在需要清除浮动的元素中定义CSS代码overflow:auto或overflow:hidden即可。
优点:有效地解决了使用空标签清除浮动而不得不增加无意义结构元素的弊端。
<html> <head><style type="text/css">#layout{overflow:auto;background:red;}#left{float:left;width:20%;height:200px;background:blue;line-height:200px;}#right{float:right;width:30%;height:80px;background:yellow;line-height:80px;}</style></head><body><div id="layout"><div id="left">Left</div><div id="right">Right</div></div></body> </html>
(3)对父元素使用:after伪元素
方法一: 对父元素使用:after伪元素,设置display:table
display:table 使生成的元素以块级表格显示,占满剩余空间。
通过content: " "生成内容作为最后一个元素,至于content里面是什么都是可以的,CSS经典的是 content:".",有些版本可能content里面内容为空。
通过分析发现,除了clear:both用来闭合浮动的,其他代码无非都是为了隐藏掉content生成的内容。
以上设置是现代浏览器方案,不支持IE6/7,*zoom: 1就是为了兼容IE6/7。
<html> <head> <style type="text/css"> #layout{ background:red; *zoom: 1; } #layout:after { content: " ";display: table; clear: both; } #left{ float:left; width:20%; height:200px; background:blue; line-height:200px; } #right{ float:right; width:30%; height:80px; background:yellow; line-height:80px; } </style> </head> <body> <div id="layout"> <div id="left">Left</div> <div id="right">Right</div> </div> </body> </html>
方法二:对父元素使用:after伪元素,设置display:block
display: block使生成的元素以块级元素显示,占满剩余空间。
height: 0避免生成内容破坏原有布局的高度。
visibility: hidden使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互。
通过content: " "生成内容作为最后一个元素,至于content里面是什么都是可以的,CSS经典的是 content:".",有些版本可能content里面内容为空。
通过分析发现,除了clear:both用来闭合浮动的,其他代码无非都是为了隐藏掉content生成的内容。
<html> <head> <style type="text/css"> #layout{ background: red; } #layout:after{ content: "."; visibility: hidden; display: block; height: 0; clear: both; } #left{ float:left; width:20%; height:200px; background:blue; line-height:200px; } #right{ float:right; width:30%; height:80px; background:yellow; line-height:80px; } </style> </head> <body> <div id="layout"> <div id="left">Left</div> <div id="right">Right</div> </div> </body> </html>
- 浅谈CSS清除浮动
- 浅谈css中浮动和清除浮动带来的影响
- 浅谈css中浮动和清除浮动带来的影响
- 浅谈css中浮动和清除浮动带来的影响
- CSS-浮动&清除浮动
- 浅谈 CSS 清除浮动的 6 种方法(转)
- 浅谈CSS清除浮动(ClearFix)的方法
- CSS浮动和清除浮动
- css浮动与清除浮动
- css清除浮动/闭合浮动
- css闭合浮动、清除浮动
- css浮动及清除浮动
- css浮动和清除浮动
- css clear 清除浮动
- css 清除浮动
- css清除浮动
- css清除浮动
- css 解决方案-清除浮动
- 常见计算机术语简写总结
- 我的第一个github项目,数据库中间件:DB_LIN
- Struts2之环境配置
- 深度学习你不可不知的技巧
- Beetl国际化
- 浅谈CSS清除浮动
- 缺少编译器要求的成员“System.Runtime.CompilerServices.ExtensionAttribute..ctor” 解决方案
- JS动态引入js,CSS——动态创建script/link/style标签
- 【Python】Pillow图片处理库
- Java类成员变量与函数局部变量
- 基层技术管理者
- 在Linux中将php-fpm配置成服务的方法
- Python学习---第7天--偏函数
- Mysql SSL问题