CSS ：浮动（左浮动、右浮动）
1、标准流（普通流/⽂档流）
标准流就是标签按照规定好的默认⽅式排列
（1）块级元素会独占⼀⾏，按照从上到下的⽅式排列
（2）⾏内元素会按照顺序，从左到右的顺序进⾏排列，遇到⽗元素则⾃动换⾏
（3）纵向排列标准流，横向排列⽤浮动
2、浮动的简单应⽤
（1
）让多个块级元素⽔平排列在⼀⾏（这⾥将⾏内元素转换为了块级元素）
可以看出，块元素在显⽰的时候，他们之间会有空隙。
（2）添加浮动
<!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" />
<title >test </title >
<style type ="text/css">
.myclass1{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
}
.myclass2{
background-color:black;
width: 100px;
height: 200px;
display:inline-block;
}
.myclass3{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
}
</style >
</head >
<body >
<span class ="myclass1">1</span >
<span class ="myclass2">2</span >
<span class ="myclass3">3</span >
</body >
</html >
<style type ="text/css">
.myclass1{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
.myclass2{
background-color:black;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
.myclass3{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
</style>
在标准流中不能实现的布局效果，在浮动中就可以很容易地完成，浮动可以改变标签的默认的排列⽅式。
3、浮动（左浮动与右浮动）
（1）左浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<style type="text/css">
.myclass1{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
.myclass2{
background-color:black;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
</style>
</head>
<body>
<div class="myclass1"></div>
<div class="myclass2"></div>
</body>
</html>
两个块元素本来是要每个div独占⼀⾏的，但是在添加了浮动以后就会合并到⼀⾏显⽰，因为设置的是左浮动，他们两个都是靠左排列的。（2）⼀个左，⼀个右
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<style type="text/css">
.myclass1{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
.myclass2{
background-color:black;
width: 100px;
height: 200px;
display:inline-block;
float: right;
}
</style>
</head>
<body>
<div class="myclass1"></div>
<div class="myclass2"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<style type="text/css">
.
myclass1{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
.myclass2{
background-color:black;
width: 100px;
height: 200px;
display:inline-block;
float: right;
}
</style>
</head>
<body>
<div class="myclass1"></div>
<div class="myclass2"></div>
</body>
</html>
4、浮动的特性
（1）浮动元素会脱离标准流（不再保留原来的位置，也就是说其它元素可以占⽤浮动元素的位置）<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<style type="text/css">
.myclass1{
background-color: red;
width: 100px;
height: 200px;
float: left;
}
.myclass2{
background-color:black;
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<div class="myclass1"></div>css实现三列布局
<div class="myclass2"></div>
</body>
</html>
在对红⾊元素添加了浮动以后，他的位置是可以被其他的元素所占⽤的。
（2
）浮动元素会在⼀⾏内显⽰并且元素顶部对齐
如果是标准流的话，他们是上下显⽰的，即⼀个div 元素独占⼀⾏
（3）会具有⾏内块元素的特征
<!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" />
<title >test </title >
<style type ="text/css">
.myclass1 {
background-color: red;
width: 100px;
height: 200px;
float: left;
}
.myclass2 {
float: left;
background-color: black;
width: 200px;
height: 200px;
}
</style >
</head >
<body >
<div class ="myclass1"></div >
<div class ="myclass2"></div >
</body >
</html >
<!DOCTYPE html >
<html >

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。