一般浮动是什么情况呢？一般是一个盒子里使用了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 ></div> <!--方法三：clear:both清除浮动 -->
</div> 
<div class="boxb">boxb盒子里的内容</div> 
</body> 
</html>

 

清除浮动前：
CSS清除浮动 清除float浮动_css

清除浮动后：

CSS清除浮动 清除float浮动_css_02