css清除浮动
2018-06-24 01:58:18来源:未知 阅读 ()
css中的float:
float:left 左浮动
float:right 右浮动
float:none 不浮动
float:inherit 继承浮动(继承父元素浮动属性,如果父元素无浮动属性,inherit失效)
浮动产生哪些问题:1.父元素塌陷,没有高度。2.网页中的临近元素出现异位
清除浮动的几种方法:
1.手动给父元素添加高度 缺点:如果子元素过多且数量不确定,设置较为复杂。
<!DOCTYPE html> <html lang="en"> <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 class="news"> <img src="1.jpg" /> <p>some text</p> </div> </body> </html>
2.用clear属性
<!DOCTYPE html> <html lang="en"> <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 class="news"> <img src="1.jpg" /> <p>some text</p> <div class="content"></div> </div> </body> </html>
3.给父元素添加overflow属性并结合zoom:1使用
<!DOCTYPE html> <html lang="en"> <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 class="news"> <img src="1.jpg" /> <p>some text</p> </div> </body> </html>
4.给父级元素添加浮动 缺点:相邻元素位置异常
<!DOCTYPE html> <html lang="en"> <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 class="news"> <img src="1.jpg" /> <p>some text</p> </div> </body> </html>
5.使用:after伪元素
<!DOCTYPE html> <html lang="en"> <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>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:打字效果动画实现方法
下一篇:浅谈BFC与高度塌陷
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash