css浮动、绝对定位脱离文档流的区别
程序员文章站
2022-04-24 22:41:00
...
准确的说，float浮动属于半脱离文档流，
1、float浮动跟position:absolute一样拥有脱离文档流的功能，但是float虽然脱离了文档流但是仍然会占据位置，其他的文本内容会按照顺序继续排列——如果你对所有的元素都设置了浮动，你会看到这几个div并不会重叠，而是会顺序排列。可以参考设置display:none,跟visible:hidden的效果。
其他盒子看不见被float的元素，但是其他盒子里的文本看得见
float浮动：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>浮动float和absolute区别</title>
6 <style>
7 .box{
8 width: 500px;
9 height: 300px;
10 border: 1px solid black;
11 margin: 0 auto;
12 position: relative;
13 }
14 .first {
15 width: 150px;
16 height: 100px;
17 /*float: left;*/
18 display: inline-block;
19 background: pink;
20 border: 10px solid red; /*增加了边框*/
21 }
22 .second {
23 width: 100px;
24 height: 100px;
25 background: blue;
26 display: inline-block;
27 float: left; /*只设置一个浮动*/
28 }
29 .third{
30 width: 50px;
31 height: 100px;
32 /*float: left;*/
33 display: inline-block;
34 background: green;
35 }
36 </style>
37 </head>
38
39 <body>
40 <div class="box">
41 <div class="first">123</div>
42 <div class="second">456</div>
43 <div class="third">789</div>
44 </div>
45 </body>
46 </html>
脱离文档流对比
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>浮动float和absolute区别</title>
6 <style>
7 .box{
8 width: 500px;
9 height: 300px;
10 border: 1px solid black;
11 margin: 0 auto;
12 position: relative;
13 }
14 .first {
15 width: 150px;
16 height: 100px;
17 /*float: left;*/
18 display: inline-block;
19 background: pink;
20 border: 10px solid red; /*增加了边框*/
21 }
22 .second {
23 width: 100px;
24 height: 100px;
25 background: blue;
26 display: inline-block;
27 position: absolute;
28 left:0;
29 opacity: 0.8
30 /*float: left;*/
31
32 }
33 .third{
34 width: 50px;
35 height: 110px;
36 float: left;
37 display: inline-block;
38 background: green;
39 /*position: absolute;*/
40 }
41 </style>
42 </head>
43
44 <body>
45 <div class="box">
46 <div class="first">123</div>
47 <div class="second">456</div>
48 <div class="third">789</div>
49 </div>
50 </body>
51 </html>
** 浮动解析**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{width:500px;height:500px;border: 5px solid green;}
.first {
width: 200px;
height: 200px;
border: 3px solid red;
float:left; /*左浮动*/
}
.second {
width: 150px;
height: 100px;
border: 3px solid blue;
}
.third{
width: 110px;
height: 100px;
border: 3px solid grey;
float:left; /*左浮动*/
}
</style>
</head>
<body>
<div class="box">
<div class="first">123</div>
<div class="second">456</div>
<div class="third">789</div>
</div>
<div>我是文字</div>
</body>
浮动和定位的区别：
所以浮动还会占据原来的位置
定位会脱离文档流，不占据原来的位置
如果三个元素均设置了浮动，则按顺序位置并排在一排，产生的问题是会使父元素（没设置宽高情况下）高度坍塌从而使边框合并，解决的方法就是清除浮动。
若第二个元素设置了宽高，则第三个元素浮动会漂浮在宽高之外。
推荐阅读
-
css 盒模型 文档流 几种清除浮动的方法
-
绝对定位和浮动的问题，求大神帮忙解决_html/css_WEB-ITnose
-
CSS布局之浮动(float)和定位(position)属性的区别
-
关于浮动和绝对定位的区别，到底是怎么回事？_html/css_WEB-ITnose
-
css盒子模型、文档流、相对与绝对定位、浮动与清除模型_html/css_WEB-ITnose
-
块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解_html/css_WEB-ITnose
-
css盒子模型、文档流、相对与绝对定位、浮动与清除模型_html/css_WEB-ITnose
-
css3之position相对定位和绝对定位以及固定定位的区别
-
浮动对正常文档流的影响（区分浮动和绝对定位的脱标）
-
css浮动、绝对定位脱离文档流的区别