一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级
对象盒子不能被撑开,这样CSS float浮动就产生了。
1、背景不能显示
由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景
图片,而父级不能被撑开,所以导致CSS背景不能显示。
2、边框不能撑开
如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float
属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。
特别是上下边的padding和margin不能正确显示。
<!DOCTYPE html> <html> <head> <title>CSS清除浮动 清除float浮动</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .boxa {background: #ddd;border: 5px solid green;margin:0 auto; width:400px;/*height: 80px;*/ /*方法一:对父级设置适合CSS高度*//*overflow: hidden; */ /*方法二:父级div定义 overflow:hidden*/}.boxb { margin:0 auto; width:400px;} .boxa-l { float:left; width:280px; height:80px; border:1px solid #F00;background: black;} .boxa-r { float:right; width:100px; height:80px; border:1px solid #F00;background: pink;} .boxb { border:1px solid #000; height:40px; background: yellow;} .clear{ clear:both} </style> </head> <body> <div class="boxa"> <div class="boxa-l">内容左</div> <div class="boxa-r">内容右</div> <div class="clear"></div> <!--方法三:clear:both清除浮动 --></div> <div class="boxb">boxb盒子里的内容</div> </body> </html>
清除浮动前:
清除浮动后:
备注:欢迎加入web前端求职招聘qq群:668352707
如果觉得《CSS清除浮动 清除float浮动》对你有帮助,请点赞、收藏,并留下你的观点哦!