文档流、文本流、浮动
2021-01-15 本文已影响0人
踏莎行
在做页面布局的时候，我觉得这些流的概念应该好好理解，不然在写页面时就发现结果不是自己预想的那样，找了半天也不知道原因，可能就会一遇到这样的问题就是用定位。当然问题是解决了，但是代码质量就下去了。来看看这些概念吧。
文档流
文档流(Normal flow)就是常规流，普通流，标准流、是相对于盒模型讲的。简单地说就是块级元素与行内元素在页面当中的排列规则：所有处于文档流中的元素会自动的从左到右(非块级元素),从上到下(块级元素)的排列规则。
1. 行内元素：
- 行内元素之间会排列在一行，排满一行会自动换行，但是各行内元素之间存在空白折叠。关于空白折叠的解决在https://www.jianshu.com/p/18f3316aab40这里有说明。
- 不能设置宽高度，默认就是文字的宽度
2. 块级元素：
- 独占一行
- 能设置宽高度，如果不设置宽度，则默认会变为父亲的100%
每个元素是行内还是块级的定义不是那么绝对的，还是由css来控制的，两者是可以相互转化的。div属于块级元素，我们可以通过css来把它变成行内元素：
div{
display: inline;
}
同理若将行内元素变成块级元素就将该元素的display属性值改为block。
文本流
文本流是相对于文字段落而言的，文本流，概括地说其实就是一系列字符，是文档的读取和输出顺序，也就是我们通常看到的由左到右、由上而下的读取和输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的。
浮动
定义
指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反），设置了浮动的元素也就脱离了文档流。
举个栗子
以div元素为例：
div元素属于块级元素，即使div的再小，他也是独占一行的，那么问题来了，我就想让多个div排成一排怎么办？这个时候就需要浮动了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
background-color: #f40;
}
.box2{
background-color: #111;
}
.box1,
.box2{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果就是：上下排列
1.PNG
此时为两个div添加左浮动：
.box1,
.box2{
float: left;
width: 200px;
height: 200px;
}
2.PNG
此时两个div就无隙并排排列了，这是左浮动，顾名思义，右浮动就是靠右排列了
.box1,
.box2{
float: rigth;
width: 200px;
height: 200px;
}
3.PNG
特点
- 脱离文档流，不再受文档流的约束了，实例就是我们上面举的例子，但是有一点需要明确：上面的例子两个div盒子都是在body元素中的，如果我们在body中添加行内元素或者块级元素，再观察一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
background-color: #f40;
/* float: left; */
}
.box2{
background-color: #111;
}
.box1,
.box2{
float: left;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h5>float</h5>
<div>特点</div>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
展示的效果是：
4.PNG
两个浮动的盒子避开了没有浮动的盒子，自成一行。
- 浮动起来的元素他会停靠在父元素或者已经浮动元素的左边或者右边。上面的例子中，两个浮动盒子都是在body元素中，因为是左浮动，所以红色div靠在body的左边，而黑色div就靠在了红色div旁边。下面我们来看，两个盒子同样是左浮动，我给黑色盒子添加一个父级div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
background-color: #f40;
/* float: left; */
}
.box2{
background-color: #111;
}
.wrapper{
width: 500px;
height: 300px;
background-color: green;
}
.box1,
.box2{
float: left;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class='wrapper'>
<div class="box2"></div>
</div>
</body>
</html>
这时候却发现div.wrapper明明是黑色盒子的父级，却把红色盒子也包裹住了
5.PNG
div.wrapper的宽度是500px, 每个浮动盒子的宽度是200px，现在将div.wrapper的宽度改成300px，就是说两个浮动后盒子的宽度大于绿色盒子宽度：
.wrapper{
width: 300px;
height: 300px;
background-color: green;
}
黑色盒子竟然掉下来了：
6.PNG
- 实现文字环绕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
float: left;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus veniam aliquam hic fugiat ullam explicabo ut tenetur vitae autem pariatur repudiandae expedita eaque officiis molestias suscipit, laborum sequi deleniti provident.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus veniam aliquam hic fugiat ullam explicabo ut tenetur vitae autem pariatur repudiandae expedita eaque officiis molestias suscipit, laborum sequi deleniti provident.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus veniam aliquam hic fugiat ullam explicabo ut tenetur vitae autem pariatur repudiandae expedita eaque officiis molestias suscipit, laborum sequi deleniti provident.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus veniam aliquam hic fugiat ullam explicabo ut tenetur vitae autem pariatur repudiandae expedita eaque officiis molestias suscipit, laborum sequi deleniti provident.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus veniam aliquam hic fugiat ullam explicabo ut tenetur vitae autem pariatur repudiandae expedita eaque officiis molestias suscipit, laborum sequi deleniti provident.
</body>
</html>
7.PNG
从此也可以得出一个结论：浮动不会遮挡文档流中的文字，像图6，浮动就遮挡了文档流中的块级元素
-
实现文字下划线
如果我们要为标题添加下划线，可以给标题标签添加下边框，但是标题标签是块级元素，这样一来一行都是下边框，超出了文字的范围
11.PNG
这个时候，我们只需要给标题标签设置左浮动即可
12.PNG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h4{
font-size: 25px;
border-bottom: 4px solid red;
float: left;
}
</style>
</head>
<body>
<h4>标题</h4>
</body>
</html>
- 浮动元素的宽度
如果一个块级元素没有手动设置宽度，它的默认宽度是100%的，但是浮动的元素它的宽度就不是100%了。
1.如果手动设置宽度，设置的是多少就是多少
2.如果没有设置并且没有子元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
float: left;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
8.PNG
页面中没有任何显示，通过开发者工具可以发现，他们的宽高都是0px
3.如果没有设置宽度，浮动元素中含有其他元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
float: left;
background-color: red;
}
.in{
background-color: #111;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="in"></div>
</div>
</body>
</html>
9.PNG
从此可以看出，浮动盒子内部元素的大小就是该浮动元素的大小
浮动的细节
- 左浮动的盒子向上向左排列
- 右浮动的盒子向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动盒子，则该盒子向下移动
