浮动
一、浮动是什么
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>
效果:
内容增多的时候容易造成内容被隐藏掉,无法显示要溢出的元素