CSS清除浮动清除float浮动

来源：互联网发布：多功能助手软件编辑：程序博客网时间：2024/06/05 01:10

一般浮动是什么情况呢？一般是一个盒子里使用了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>

清除浮动前：

清除浮动后：

阅读全文

1 0

CSS清除浮动 清除float浮动

CSS清除浮动清除float浮动