css清除浮动的方法
程序员文章站
2022-04-19 14:29:13
...
css中的float:
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清除浮动的方法的详细内容,更多请关注其它相关文章!
上一篇: Ajax和jsonp在项目中的实战总结
下一篇: 兼容性测试,网页的设计工具推荐
推荐阅读
-
动态加载、移除js/css文件的方法
-
tsvulfwman.exe是什么进程 tsvulfwman的清除方法
-
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
-
当把宽度设为25%时,其他浏览器正常,IE7图片会掉下来,有没有好的解决方法_html/css_WEB-ITnose
-
DIV+CSS三列式布局的实现方法_html/css_WEB-ITnose
-
css3 伪对象选择器添加几何图形文字的方法
-
IE6兼容inline-block的方法_html/css_WEB-ITnose
-
清除浮动4-插入多余的div_html/css_WEB-ITnose
-
php获取CSS文件中图片地址并下载到本地的方法,
-
用MySQL函数清除字符串首尾空白字符的方法