浮动布局是很常见的一种布局,我们基本上都知道当元素开启浮动后会脱离文档流,相邻兄弟元素会受浮动影响进行位置偏移
例如
<style>
.box1{
background-color: rgb(53, 20, 201);
width: 300px;
height: 300px;
float: left;
}
.box2{
background-color: brown;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
这里下面的box2就因为浮动影响跑到了box1下面
但是当box2里面有文本内容的的时候,就会发生文字环绕
<style>
.box1{
background-color: rgb(53, 20, 201);
width: 300px;
height: 300px;
float: left;
}
.box2{
background-color: brown;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">ssdsadasdasdasdad</div>
</body>
发生这种情况的原因其实是因为浮动最早就是被用于文字环绕,所以文字并没有被覆盖掉