浮动：让块元素在同一行显示，文档脱离文档流，按照浮动方向移动，遇到父级边界或相邻的浮动元素停住。
float : left / right / none;
浮动产生的问题：
浮动会使元素失去高度。
1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开
如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
案例html结构为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 400px;
background-color: rosybrown;
border: 1px solid #000;
}
.div_left, .div_right{
width: 100px;
height: 100px;
background-color: mistyrose;
}
.div_left{
float: left;
}
.div_right{
float: right;
}
</style>
</head>
<body>
<div class="parent">
<div class="div_left">left</div>
<div class="div_right">right</div>
</div>
</body>
</html>
在清除浮动前的页面布局，如下：
清除浮动的方法：
1.给父元素设置高度
在这里需要给父元素设置合适的高度值，一般设置高度需要能确定内容高度才能设置。设置的前提是对象内容高度要能确定并能计算好，实际操作高度会发生变化。
确定了子元素的高度，根据内容设置父元素 parent 添加属性 height:100px;，设置后，其展示内容如下：
2.给父级添加属性 overflow: hidden;
overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。优点：代码量很好。缺点：在父元素外的东西都会被隐藏。所以这个是不推荐的。
添加后的结果与方法一的展示一致。
3.添加空标签 <div style="clear:both"></div>
在与子元素同级的位置添加这个空标签，如下：
<div class="parent">
<div class="div_left">left</div>
<div class="div_right">right</div>
<div style="clear:both"></div>
</div>缺点是会多加一个空标签。
4.给父元素添加class属性为 clearfix
样式选择器CSS命名为“ .clearfix ”，对应的选择器样式为下方代码：
.clearfix:before,.clearfix:after{
display:table;
content:"";
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}直接为父元素添加类名：
<div class="parent clearfix"></div>5.让父元素也浮动起来
也可实现，但是不推荐。
扫一扫
3668
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
