浮动布局：left right
特点
- 元素浮动之后不占据原来的位置（脱标）
- 浮动的盒子在一行上显示
- 行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;）
浮动作用
- 文本绕图
- 制作导航
- 网页布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
margin:0 ;
}
.red,.green,.blue{
width: 200px;
height: 200px;
}
.red{
background: red;
float:left;
}
.green{
background: green;
float:left;
}
.blue{
background: blue;
float:right;
}
span{
float: left;
background: pink;
width:100px;
height: 200px;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<span></span>
</body>
</html>
浮动原理
网友评论