Heim > Artikel > Web-Frontend > css清除浮动代码实例演示_html/css_WEB-ITnose
css清除浮动代码实例演示_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:29:181218Durchsuche
css清除浮动代码实例演示:
在页面中如果采用了浮动，那么清除浮动则是必须要进行的操作，否则可能引起一些意想不到的后果。
本章节不会对浮动或者清除浮动的原理做介绍，只是分享一下清除浮动的几段代码，因为有些朋友可能需要的就是一个代码实例，关于浮动或者清除清除浮动的相关内容可以参阅相关阅读。
一.使用overflow清除浮动:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">*{ margin:0px; padding:0px;}#box{ list-style:none; width:150px; overflow:hidden; border:1px solid red; margin:50px;}#box li{float:left;}</style></head><body><ul id="box"> <li>蚂蚁部落一</li> <li>蚂蚁部落二</li> <li>蚂蚁部落三</li> <li>蚂蚁部落四</li></ul></body></html> 在父元素上添加overflow:hidden即可清除浮动。
二.在浮动元素后面添加一个空标签:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">*{ margin:0px; padding:0px;}#box{ list-style:none; width:150px; overflow:hidden; border:1px solid red; margin:50px;}#box li{float:left;}.clear{clear:both}</style></head><body><ul id="box"> <li>蚂蚁部落一</li> <li>蚂蚁部落二</li> <li>蚂蚁部落三</li> <li>蚂蚁部落四</li> <div class="clear"></div></ul></body></html> 三.各大网站最为推荐的一个方式:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> .parent{border:2px solid green;} .clearfix{*zoom:1;} .clearfix:after{ content:"."; display:block; height:0; visibility:hidden; clear:both; } .children{ width:100px; height:100px; background-color:red; float:left; } .right{ width:100px; height:100px; background-color:blue; float:right } </style> </head> <body> <div class="parent clearfix"> <div class="children"></div> <div class="right"></div> </div> </body> </html> 上面是清除浮动的几种方式，这里就不多介绍了，更多内容可以参阅相关阅读。
相关阅读:
1.BFC块级格式化上下文可以参阅CSS的BFC块级格式化上下文详解一章节。
2.清除浮动可以参阅CSS清除楚loat浮动详解一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14243
更多内容可以参阅:http://www.softwhy.com/divcss/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：canvas绘画常用方法_html/css_WEB-ITnoseNächster Artikel：兼容低版本IE浏览器的背景颜色渐变效果_html/css_WEB-ITnose