浮动
◇float属性脱离常规文档流而表现为向右或向左浮动
◇float属性的取值：
right left none
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: black;
float: left;
/*向左浮动*/
}
.div2{
width: 180px;
height: 180px;
background-color: orange;
float: right;
/*向右浮动*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
效果图：
注：
１.浮动盒子的宽度不会自动伸展，宽度以内容和margin、padding属性为准；
２.标准流中其他盒子将视浮动盒子不存在而占据浮动盒子的位置，但内容会受到浮动盒子宽度的影响；
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: black;
opacity: 0.4;
/*为了看到更加直观，我们给浮动盒子加上透明度*/
float: left;
/*向左浮动*/
}
.div2{
width: 180px;
height: 180px;
background-color: orange;
/*div2为标准流*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">我卢本伟没有开挂</div>
</body>
</html>
效果如图：
３.可以设置clear属性使标准流中其他盒子不受之前盒子的影响；
４.父级盒子中的所有盒子都采用的浮动形式，若父级盒子未指定高度则父级盒子的高度为 ：0，因为所有盒子都是浮动已脱离标准流。解决办法是增加一个标准流的盒子。
清除浮动
首先 ，为什么要清除浮动：
直接看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div{
border: 1px solid red;
}
.div1{
width: 100px;
height: 100px;
background-color: black;
float: left;
/*向左浮动*/
}
.div2{
width: 180px;
height: 180px;
background-color: orange;
float: left;
/*向左浮动*/
}
</style>
</head>
<body>
<div class="div">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
</html>
效果如图：
本来黑色盒子和橙色盒子是在红框盒子里面的，所以红框盒子理应被撑开；
但是由于黑色和橙色盒子采用了浮动，脱离了标准流；导致了红框盒子没有被撑开；
所以，我们需要清除浮动。
浮动带来的坏处：
1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
清除浮动的方法：
1.增加兄弟DOM(块元素)
例如：
在父容器里增加一个空的div，给他设置一个clear属性
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div{
border: 1px solid red;
height: 182px;
}
.div1{
width: 100px;
height: 100px;
background-color: black;
float: left;
/*向左浮动*/
}
.div2{
width: 180px;
height: 180px;
background-color: orange;
float: right;
/*向左浮动*/
}
.div3{
clear: both;
/*both:清除所有浮动影响*/
/*left:清除左浮动影响*/
/*right:清除右浮动影响*/
}
</style>
</head>
<body>
<div class="div">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
效果如图：
2.通过伪类
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div{
border: 1px solid red;
}
.div1{
width: 100px;
height: 100px;
background-color: black;
float: left;
/*向左浮动*/
}
.div2{
width: 180px;
height: 180px;
background-color: orange;
float: right;
/*向左浮动*/
}
.div:after{
content:"" ;
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="div">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
</html>
效果如图：
2407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
