HTML连载45-浮动元素脱标、排序规则、贴靠现象
程序员文章站
2022-05-04 13:05:32
一、浮动元素脱标 1.什么是浮动元素脱标 脱标：脱离标准流。 当某一个元素浮动之后，那么这个元素看上去就像被从标准流中删除了一样 2.浮动元素脱标之后有什么影响 如果前面一个元素浮动了，而后面的一个元素没有浮动，那么这个时候前面的一个元素就会盖住后面的一个元素。前后如果反了没事 举例： 二、浮动元素 ......
一、浮动元素脱标
1.什么是浮动元素脱标
脱标：脱离标准流。
当某一个元素浮动之后，那么这个元素看上去就像被从标准流中删除了一样
2.浮动元素脱标之后有什么影响
如果前面一个元素浮动了，而后面的一个元素没有浮动，那么这个时候前面的一个元素就会盖住后面的一个元素。前后如果反了没事
举例：
<style>
.box1{
float:left;
width:50px;
height: 50px;
background-color: red;
}
.box2{
/*float:left;*/
width:100px;
height:100px;
background-color: black;
}
.........省略代码..........
<div class="box1"></div>
<div class="box2"></div>
二、浮动元素排序规则
1.浮动元素排序规则
（1）相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示后面；
.box3{
width:50px;
height:50px;
background-color: yellow;
float:left;
}
.box4{
width:100px;
height:100px;
background-color: purple;
float:left;
}
..........省略代码.........
<div class="box3"></div>
<div class="box4"></div>
（2）不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动；
.box3{
width:50px;
height:50px;
background-color: yellow;
float:left;
}
.box4{
width:100px;
height:100px;
background-color: purple;
float:left;
}
.box5{
width:150px;
height:150px;
background-color: blue;
float:right;
}
.box6{
width:200px;
height:200px;
background-color: black;
float:right;
}
..........省略代码...........
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
（3）浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定。
.box3{
width:50px;
height:50px;
background-color: yellow;
float:left;
}
.box4{
width:100px;
height:100px;
background-color: purple;
float:left;
}
.box5{
width:150px;
height:150px;
background-color: blue;
/*float:right;*/
}
.box6{
width:200px;
height:200px;
background-color: black;
/*float:right;*/
}
.box7{
width:250px;
height:250px;
background-color: black;
float:right;
}
.........省略代码...........
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
总结：（1）连续的浮动，是放在一行上搞；连续的非浮动，正常标准流搞
（2）浮动+非浮动，浮动是放在一行上搞，非浮动就好像浮动不存在一样正常标准流搞；（3）非浮动+浮动：非浮动正常标准流搞，浮动是另起一行，放在一行上搞。
二、浮动元素的贴靠现象
.father{
width: 400px;
height: 400px;
border:1px solid black;
float:left;
}
.hezi1{
width: 50px;
height: 300px;
background-color: red;
float:left;
}
.hezi2{
width: 50px;
height: 100px;
background-color: blue;
float:left;
}
.hezi3{
width: 250px;
height: 100px;
background-color: green;
float:left;
}
.........省略代码.........
<div class="father">
<div class="hezi1"></div>
<div class="hezi2"></div>
<div class="hezi3"></div>
</div>
我们把.father中的宽度减小到350
再减小到200
我们从中可以看出后面的盒子会往前依次贴，直到怎么贴不住了，只能溢出了。
四、源码：
d123_floatyuansuoderandattach.html
地址:
https://github.com/ruigege66/html_learning/blob/master/d123_floatyuansuoderandattach.html
2.csdn：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取java大数据学习视频礼包