0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
        .a{
            width: 300px;
            height: 300px;
            background: red;

        }

        .b{
            width: 300px;
            height: 300px;
            background: aqua;
            float: left;
        }
        
    </style>
</head>
<body>
    <div class="a">a</div>
    <div class="b">b</div>
    
</body>
</html>

4个回答

2

float并没有完全脱离文档流,完全脱离文档流的是position:absolute/fixed
推荐你看下这篇文章张鑫旭:float

0

因为虽然脱离了文档流,但浮动<div>b</div>的外边框碰到body的边框就会停止浮动。
建议再仔细阅读下w3school上关于浮动的解释

0

你把a和b两个div的位置换下其实很清楚为什么。float的元素只要碰到边界就会定下来。当b这个div在a的div上面

<div class="b">b</div>
<div class="a">a</div>

b这个div会覆盖在a上面。这是因为b先浮动,碰到body的最左边的边界,就占在那,但是因为它是浮动的,而a是在文档上的,a就会移到body的最左边,也就是b的下面。

撰写答案