操作windows10系统、CSS3&&HTML5版、Dell G3电脑时css3中清除浮动的代码是什么
1:使用带clear属性的空元素
使用空标签清除浮动:在需要清除浮动的父级元素内部的所有浮动元素后添加一个空标签(理论上可以是任何标签,但常用
和
)清除浮动,并为其定义CSS代码clear:both。
代码实例:
< DOCTYPE html> <html> <head> <meta charset="UTF -8"> <title></ title> <style> . demo{ width: 500px; margin: 50px auto ; background-color: #CCCCCC ; } left{ width: 100px; height: 100px; float: left ; background-color: #21B4BB } right{ width: 100px ; height: 50px; float: right; background-color: #21B4BB; } clear{ clear : both ; } </sty1e> < /head> < body> <div class= "demo"> <div class="left">left</div> <div class= "right" >right</div> <div class= "clear"></div> </div> </body> </html>
优点:简单,代码少,浏览器兼容性好。
缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。
2:使用CSS的overflow属性
使用overflow清除浮动:只需在需要清除浮动的元素中定义CSS代码overflow:auto或overflow:hidden即可。
代码实例:
< !DOCTYPE html> <html> <head> <meta charset t="UTF-8" > <title></title> <style> . demo{ width: 500px; margin: 50px auto; backgr round-color: #CCCCCC ; overflouthidden } left{ width: 100px; height: 100px; float: left ; background-color: #21B4BB ; } right{ width: 100px; height: 50px; float: right ; background-color: #21B4BB; } </style> < /head> < body> <div class="demo"> <div class="left">left</div> <div class= "right" >right</div> </div> < /body> < /html>
优点:不存在结构和语义化问题,代码量极少
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素
3:使用CSS的:after伪元素
对父元素使用:after伪元素,设置display:table。
display:table 使生成的元素以块级表格显示,占满剩余空间。
通过content: " "生成内容作为最后一个元素,至于content里面是什么都是可以的,CSS经典的是 content:".",有些版本可能content里面内容为空。
代码实例:
<!DOCTYPE html> <html> <head> <meta charset="TF-8"> <title></title> <style> . demo{ width : 500px; margin: 50px auto; background-color: cCCCc; overflow:hidden } left{ width: 100px; height: 100px; float: left; background-color: #21B4BB; } right{ width: 100px; height: 50px; float: right ; background-color: #21B4BB ; } </style> </head> < body> <div class="demo" > <div class= "left">left< /div> <div class="right" >right</div> </div> </body> < /html>
缺点:适合现代浏览器,不支持IE6/7,*zoom: 1就是为了兼容IE6/7
以上就是关于css3中清除浮动的代码是什么的全部内容,想了解更多的话请关注翼速网络应用平台获取更多内容!
我来说两句