浮动顺序问题

新手上路,请多包涵

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    .one{
        width: 200px;
        height: 200px;
        background-color: blue;
    }
    .two{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .two,.one{
        float:right;
    }
</style>

</head>
<body>

<div class="container">
    <div class="one"></div>
    <div class="two"></div>
</div>

</body>
</html>

为什么不是红色的在右边,蓝色的在左边

阅读 1.6k
3 个回答

html代码的渲染都是从左至右滴,所以你不管是向左还是向右浮动,你的页面渲染顺序是和代码顺序是一致的,即div-1、2。

如果不加float,那么原来的顺序应该是blue独占一行,下方red独占一行;但是加了float之后,div就会产生浮动,浮动的顺序是什么样的呢?首先blue会先浮动,占据右边的位置(因为float:right),然后red也会浮动,但一看blue已经占位置了,那么就只能乖乖的排在blue后面了。

你这是右浮动,class='one', 排第一位,从右开始

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题