CSS之浮动（float)的概念
要弄懂浮动首先要了解标准流的概念
标准流（normal flow)是指在html中标签元素按照默认方式排列下的布局
默认方式下块级元素单独占一行，而文字和行内块元素则从左往右依次排列。
举个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a {
background-color: deeppink;
width: 100px;
height: 100px;
}
.b {
background-color: aliceblue ;
width: 100px;
height: 100px;
}
.c {
background-color: greenyellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
</body>
</html>在浏览器下的显示效果：
我们定义三个div盒子，给定了宽度，然而同级的盒子之间仍然另起一行显示
可见，标准流情况下div标签下的元素哪怕给定了宽度，同级的另一个div标签依然会另起一行显示。
然而在实际运用中，很多时候需要我们把多个盒子放到一列中显示，这时候就需要用到浮动了
什么是浮动？
浮动就是取消标准流的格式，让块级元素可以在同一行中显示。
在css中浮动的写法：
|
选择器{float: 属性值;} |
float有四个属性值：
|
left |
向左浮动 |
| right | 向右浮动 |
| none | 不浮动（标准流） |
| inherit | 继承父级元素的浮动属性 |
浮动与标准流的关系
1.浮动与标准流下的块级元素。
给上面的例子加入浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a {
background-color: deeppink;
width: 100px;
height: 100px;
float: left;
}
.b {
background-color: aliceblue;
width: 100px;
height: 100px;
float: right;
}
.c {
background-color: greenyellow;
width: 100px;
height: 100px;
float: none;
}
</style>
</head>
<body>
<div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
</body>
</html> float: left;
}
.b {
background-color: aliceblue;
width: 100px;
height: 100px;
float: right;
}
.c {
background-color: greenyellow;
width: 100px;
height: 100px;
float: none;
}
</style>
</head>
<body>
<div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
</body>
</html>结果是这样的：
我们发现，我们给了标签为c的块级元素float: none的属性，相当于c是标准流的格式，但是a却把c盖住了
调整c盒子的宽高可以看得更加直观：
这是因为浮动属性下的元素是不占标准流的块级元素的位置的，所以标准流的块级元素仍然会按默认的方式从左上开始排列。当浮动的块级元素和标准流的块级元素的位置发生重叠时，浮动元素就会盖住标准流的块级元素。
2.浮动与标准流的行内元素。
在c的属性中加入
| display: inline-block; |
使其成为行内块元素
结果是这样的：
给了标准流下的c盒子一个行内块属性的时候，浮动的盒子并没有盖住c盒子，而是把c盒子“挤”开了。
可以这样理解：浮动元素只会飘浮于垂直排列的块级元素上方，浮动的块级元素可以理解为是一个行内块，而标准流中的水平排列的行内元素则相当于同一层面，会被浮动元素挤出去，形成环绕的效果。
外链:https://slartbartfast.cn/articlePage.php?articleid=234
上一篇： LESS的基本使用方法
下一篇： HTML的补充，HTML框架