三个div快第一个左浮动第二个不浮动第三个右浮动为什么右浮动上不去？

本文链接：https://blog.csdn.net/Byte_Dance/article/details/79456860

因为第三个div块是写在第二个div块下面的，而且第二个div块的位置正常，没有浮动，它会一直占住它本来的位置。所以第三个div块不管怎么浮动都会被第二个div块挡下去。

就好像假如你的第一个向左浮动的div是写在第二个div下面，它也是不可能占到第二个蓝色的位置上去的。

左边的元素左浮动,当浮动出中间内容区域范围之后,打印就看不到左边的了,可以直接用固定定位fixed给他定位住, 右边的只能使用左float跳出中间区域,再加fixed定位到固定位置,这样打印只能显示出中间的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <link href="室内全彩型材/css/bootstrap.min.css" rel="stylesheet">
    <link href="室内全彩型材/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="public/css/demo.css">

    <style>
        #div1{
            width:300px;
            height: 300px;
            background: red;
            float: left;
            margin-left:-350px;
            position: fixed;
        }
        #div2{
            /*width:900px;*/
            height:100%;
            background: red;
        }
        #div3{
            width:400px;
            height: 400px;
            background: blue;
            float: left;
            margin-left:1180px;
            position: fixed;
            top:0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="div1">
            <h1>aaaaaaaaaaaaaaaa</h1>
            <h1>aaaaaaaaaaaaaaaa</h1>
            <h1>aaaaaaaaaaaaaaaa</h1>
            <h1>aaaaaaaaaaaaaaaa</h1>
        </div>
        <div id="div2">
            <h1>bbbbbbbbbbbbbbbbb</h1>
            <h1>bbbbbbbbbbbbbbbbb</h1>
            <h1>bbbbbbbbbbbbbbbbb</h1>
            <h1>bbbbbbbbbbbbbbbbb</h1>
            <h1>bbbbbbbbbbbbbbbbb</h1>
            <h1>bbbbbbbbbbbbbbbbb</h1>
            <h1>bbbbbbbbbbbbbbbbb</h1>
            <h1>bbbbbbbbbbbbbbbbb</h1>
            <h1>bbbbbbbbbbbbbbbbb</h1>
            <h1>bbbbbbbbbbbbbbbbb</h1>
            <h1>bbbbbbbbbbbbbbbbb</h1>
            <h1>bbbbbbbbbbbbbbbbb</h1>
            <h1>bbbbbbbbbbbbbbbbb</h1>
            <h1>bbbbbbbbbbbbbbbbb</h1>
            <h1>bbbbbbbbbbbbbbbbb</h1>
            <h1>bbbbbbbbbbbbbbbbb</h1>
            <h1>bbbbbbbbbbbbbbbbb</h1>
        </div>

        <div id="div3">
            <h1>aaaaaaaaaaaaaaaa</h1>
            <h1>aaaaaaaaaaaaaaaa</h1>
            <h1>aaaaaaaaaaaaaaaa</h1>
            <h1>aaaaaaaaaaaaaaaa</h1>
        </div>
    </div>
</body>
</html>

想要做出这种效果,就得先把所有内容居中,再设置尺寸,然后把上下各浮动到两边,完成功能,使用bootstarp可以简单做到