兄弟级box1块级元素开启float，块级元素box2没有开启浮动，但是box2作为块级元素却没有独占一行，为什么？
问题详细描述请看代码：
<!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>
div {
width: 200px;
height: 200px;
}
/* box1设置float：left */
.box1 {
background-color: blue;
float: left;
/* box1开启透明效果，方便查看box2未开启任何定位效果时，元素的布局效果 */
/* opacity: 0; */
}
/* box2不浮动 ,设置相对定位*/
.box2 {
/* 不开启定位时，box2边框样式隐藏在box1的下面，可以设置box1 opacity：0查看 ，box2的文本div2没有上升到上面的布局中去*/
/*
设置相对定位时，box2边框样式覆盖box1的元素布局 ，
div2文本并没有上升到上面的布局中去，
同时box3 float:right到box2文本行div2的右侧
——问题：
为什么在box1开启float后，box2的元素边框样式上升到box1的位置，
文本div2没有上升，按照我对float的理解，box2作为一个块级元素，没有开启float，
他的布局样式应该独占一行，为什么边框样式上升了，但是文本却保留下来，
而且box3即使浮动了，也应该时浮动到box2下面一行的右侧，
而不该浮动到box2拉下的文本div2的右侧，因为box2，并没有开启浮动。
针对上面的问题，其中涉及了什么样的元素布局原理？
问题简述：
——为什么box2作为块级元素，在没有开启浮动的情况下，
没有独占一行，并且边框样式和文本行相互分离？
*/
/* position: relative; */
/* 开启绝对定位时，box2布局整体覆盖了box1的元素布局 */
/* position: absolute; */
background-color: pink;
}
/* box3开启float：right */
.box3 {
background-color: red;
float: right;
}
</style>
</head>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
<div class="box3">div3</div>
</body>
</html>
——问题：
为什么在box1开启float后，box2的元素边框样式上升到box1的位置，文本div2没有上升，按照我对float的理解，box2作为一个块级元素，没有开启float，他的布局样式应该独占一行，为什么边框样式上升了，但是文本却保留下来，而且box3即使浮动了，也应该时浮动到box2下面一行的右侧，而不该浮动到box2拉下的文本div2的右侧，因为box2，并没有开启浮动。针对上面的问题，其中涉及了什么样的元素布局原理？——问题简述：
为什么box2作为块级元素，在没有开启浮动的情况下，没有独占一行，并且边框样式和文本行相互分离？如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
具体看这篇博客 https://www.cnblogs.com/stray...。写得很好的
浮动元素已经脱离了文本流，你清除一下浮动就ok了,给box2设置overflow:auto或者hidden