了解浮动之前得先知道什么是文档流。
文档流是指: 盒子按照html标签编写的顺序依次从上到下,从左到右,块元素占一行,行内元素在一行之内 从左到右依次排列,
每个盒子都占自己的位置。
浮动的特性
- 浮动分为两种 一个是左浮动 ,另一个是右浮动
- 浮动元素 遇到 无论什么类型元素都要停下来。
- 浮动元素 能让内联元素 或者 块元素转化为 内联块元素 同时具有两者的特性
- 相邻浮动的块元素可以并在一行 超出父元素的宽度 自动换行
- 浮动元素和不是浮动元素呆在一起 能形成绕图效果
每个特性我都用例子介绍,方便理解
2,3,4 可以 在一个例子 全部体现出来。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>margin塌陷</title>
<style type="text/css">
.box,.box1{
width:200px;
height:100px;
background-color:gold;
float:left;
margin:10px;
}
.box1{
float:right
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box1">2</div>
<div class="box">1</div>
<div class="box">1</div>
<a href="#" class="box">我是一个元素</a>
<div class="box">1</div>
<div class="box">1</div>
</body>
</html>
效果如下:
块元素 真的排列在一行, 内联元素 也具备了 width 和height 特性, 当不够的时候 真的换行了, 碰到有边界的时候 也停止了。
2 是靠右浮动, 直接跳过了 文档流。
下边演示 浮动绕图的效果。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>margin塌陷</title>
<style type="text/css">
.box{
width:100px;
height:50px;
background-color:gold;
float:left;
margin:20px;
}
.box1{
width:400px;
height:200px;
background-color:green;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box1">1. 浮动分为两种 一个是左浮动 ,另一个是右浮动
2. 浮动元素 遇到 无论什么类型元素都要停下来。
3. 浮动元素 能让内联元素 或者 块元素转化为 内联块元素 同时具有两者的特性
4. 相邻浮动的块元素可以并在一行 超出父元素的宽度 自动换行
5. 浮动元素和不是浮动元素呆在一起 能形成绕图效果
</div>
</body>
</html>
效果如下:
绕图浮动慎用, 不好控制。