1、CSS浮动产生原因
一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。
2、CSS浮动影响
1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
3、清除浮动影响的方法
（1）使用clear属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动高度塌陷</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
.left{
width: 100px;
height: 100px;
background: red;
float: left;
}
.right{
width: 100px;
height: 100px;
background: blue;
float: right;
}
.wrap{
background: gray;
border: 1px solid yellow;
width: 500px;
margin:20px auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
运行效果：
清楚浮动前
使用clear:both 清楚浮动
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div style="clear: both"></div>
</div>
运行效果：
清楚浮动后
（2）使父元素BFC
给父wrap元素添加 overflow:hidden属性，使其产生BFC。运行效果与clear:both 效果相同。
网友评论