CSS float 的疑问 : 当给两个div都设置浮动之后,为什么它们会在同一行显示?

发布于
2019-01-27

先看代码
图片描述

MDN:当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，
一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

疑问:MDN中说的是向左或向右移动,一直平移直到碰到了所处的容器的边框。
可是.box2元素为什么是向上移动了吗?

MDN:浮动元素是如何定位的

CSS权威指南(第三版):"浮动元素会生成一个块级框 , 而不论这个元素本身是什么"
而且float 不为 none 的时候, 元素的 display 计算值为 block ,那这两个div更不应该位于同一行啊?

html css 前端

阅读 8.6k

6 个回答

得票最新

CRIMX

9.1k2720

发布于
2019-01-27

可是.box2元素为什么是向上移动了吗?

.box2 并没有因为自身 float 而向上移动，.box1 脱离了文档流后，.box2 就在第一行了。

而且float 不为 none 的时候, 元素的 display 计算值为 block ,那这两个div更不应该位于同一行啊?

块级级元素只有在普通流的时候才会独占一行。

代码宇宙

15.6k62141

发布于
2019-01-27

往浅了解释：人家不也说了，或者直到碰到另一个浮动元素的边框为止？
稍微专业一点的解释：从你的问题可以看出，你的思维还停留在静态定位里面，而浮动元素会脱离文档流，请问你怎么看待脱离文档流？
如果还不明白，你可以把你代码里的浮动去掉，然后把定位改成绝对定位看看

hyyou

23510

发布于
2019-01-27

更新于
2019-01-27

你好，布局原则是这样的：
首先是按块从上往下排，所以div1在第一行，div2在第二行，竖向摆放，这个算基本流吧
其次，如果存在浮动流，则浮动流先于基本流进行安排，也即会占用页面最上面的部分
再次，浮动流是横向排放，比如浮动流向左的话，第一个浮动元素排在最左，第二个次左，如果排满一行还要换行，整个浮动流跟我们平时在纸面上写作文差不多，从左到右，从上到下
再次，原本div的宽度是100%页面，但是float之后自动缩减为最小必须宽度
以上供参考

　CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
　　需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
　　而对于使用position：absolute 脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

看例子：
两个浮动的div，第三个没有浮动的div是忽略了这两个脱离文档流的元素，但是div中的文字并没有忽略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: rgba(0, 0, 0, 0.1)
        }
        .div-fl {
            float: left;
            width: 50px;
            height: 50px
        }

        .div1 {
            background: rgba(241, 110, 9, 0.8);
        }

        .div2 {
            background: #0000ffa1;
        }

        .div3 {
            width: 500px;
            height: 20px;
            background: green;
        }

        .div-pos-ab {
            width: 500px;
            height: 20px;
            background: #ffff0075;   
            position: absolute;
            color: red;
        }
    </style>
</head>
<body>
<div class=" div-fl div1"></div>
<div class="div-fl  div2"></div>

<div class="div3">this a div </div>
<span>this is some text,this is some text,this is some text,this is some text</span>
<p></p>

<div class="div-pos-ab">this is a absolute dom</div>

<span>this is some text,this is some text,this is some text,this is some text,this is some text,this is some text</span>
</body>
</html>