一、浮动对标准流的影响
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动和标准流</title>
<style type="text/css">
.container{
width: 600px;
height: 600px;
border: 1px solid blue;
}
.item-1{
width: 100px;
height: 100px;
background-color: red;
}
.item-2{
width: 200px;
height: 200px;
background-color: yellow;
}
.item-3{
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
</div>
</body>
</html>
正常效果
-
如果第一个盒子左浮动，其他盒子不浮动时
解释：因为第一个盒子在浮动层，第二和第三个盒子在标准层故按标准流的形式排列，因为第二个盒子是块级元素，独占一行。故第三个盒子另起一行。
-
如果第二个盒子左浮动，其他盒子不浮动时
解释：跟第一个盒子类似
-
如果第三个盒子左浮动，其他盒子不浮动时
解释：跟第一个盒子类似
总结：根据上面三个例子可以得出：浮动流只会对后者的标准流产生影响，前者不产生影响，更重要的是浮动元素不占用原有标准流的位置。
本文地址：https://blog.csdn.net/weixin_44659458/article/details/109261246
