浮动
一、浮动是什么
float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
二、浮动的用法
| float | 设置元素的浮动 |
|---|---|
| none | 默认值，元素不浮动 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
特点：
1、浮动的元素会脱离文档流，不再占据文档流中的位置
2、浮动的元素会移动到父元素的左侧或右侧
3、浮动的元素不会溢出父元素
4、浮动的元素不会超过前边的浮动元素（图见下方同行显示的div块）
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>浮动的用法</title>
<style type="text/css">
div{
width: 50px;
height: 50px;
}
.father{
width: 150px;
height: 150px;
border: 2px solid #000;
}
.class1{
background-color: cornflowerblue;
/*float: left;*/
}
.class2{
background-color: crimson;
/*float: left;*/
}
</style>
</head>
<body>
<div class="father">
<div class="class1"></div>
<div class="class2"></div>
</div>
</body>
</html>
写一段html代码，实现以下效果黑色边框的div中包含蓝色div和红色div，可以看到这两个div不在同一行
我们给红色div添加一个向右的浮动
.class2{
background-color: crimson;
float: right;
}
红色div脱离原文档流，向右浮动，跑到最右边了
然后给蓝色div添加向左浮动
蓝色div向左浮动，脱离文档流，与红色div并行显示
给红色蓝色div都设置为向左浮动
给红色蓝色div都设置为向右浮动
三、清除浮动的方法
很多时候为了高度的自适应性, 我们用子元素去撑起父元素的高度，但是如果子元素浮动之后, 就无法自动撑起父元素，导致, 父元素的高度为 0，具体情况如下图
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>浮动的用法</title>
<style type="text/css">
.father{
border: 2px solid #000;
}
.class1{
width: 50px;
height: 50px;
background-color: cornflowerblue;
float: left;
}
.class2{
width: 50px;
height: 50px;
background-color: crimson;
float: left;
}
.class3{
width: 150px;
height: 150px;
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="father">
<div class="class1"></div>
<div class="class2"></div>
</div>
<div class="class3"></div>
</body>
</html>
因为黑色div没有高度，子元素蓝色红色div浮动之后，撑不起来，所以被后面的绿色div顶在后面，解决方法如下
1.clear属性（添加标签）
| clear | 清除元素的浮动 |
|---|---|
| both | 同时清除左右浮动 |
| left | 清除左浮动 |
| right | 清除右浮动 |
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>浮动的用法</title>
<style type="text/css">
.father{
border: 2px solid #000;
}
.class1{
width: 50px;
height: 50px;
background-color: cornflowerblue;
float: left;
}
.class2{
width: 50px;
height: 50px;
background-color: crimson;
float: left;
}
.class3{
width: 150px;
height: 150px;
background-color: chartreuse;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="class1"></div>
<div class="class2"></div>
<div class="clearfix"></div>
</div>
<div class="class3"></div>
</body>
</html>
在父盒子里面添加一个div，给这个div设置清除浮动属性
.clearfix{
clear: both;
}
效果：
如图所示，达到清除浮动的效果，但是这种方法会添加无意义标签，不建议使用
2.after伪类选择器
我们还是利用上面的代码，使用after伪类选择器和clear属性清除浮动，代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>浮动的用法</title>
<style type="text/css">
.father{
border: 2px solid #000;
}
.class1{
width: 50px;
height: 50px;
background-color: cornflowerblue;
float: left;
}
.class2{
width: 50px;
height: 50px;
background-color: crimson;
float: left;
}
.class3{
width: 150px;
height: 150px;
background-color: chartreuse;
}
.father::after{
content: "";
clear: both;
display: block;
}
</style>
</head>
<body>
<div class="father">
<div class="class1"></div>
<div class="class2"></div>
</div>
<div class="class3"></div>
</body>
</html>
在父盒子的后面使用伪类选择器，设置为块级元素，清除左右浮动，clear：both；
效果：
使用这个方法，不会在结构中添加无意义标签。
3.overflow
给父盒子添加一个overflow属性，属性值为hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>浮动的用法</title>
<style type="text/css">
.father{
border: 2px solid #000;
overflow: hidden;
}
.class1{
width: 50px;
height: 50px;
background-color: cornflowerblue;
float: left;
}
.class2{
width: 50px;
height: 50px;
background-color: crimson;
float: left;
}
.class3{
width: 150px;
height: 150px;
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="father">
<div class="class1"></div>
<div class="class2"></div>
</div>
<div class="class3"></div>
</body>
</html>
效果：
内容增多的时候容易造成内容被隐藏掉，无法显示要溢出的元素
3125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
