CSS-float

.spank{
            background: #000000;
            width: 200px;
            height: 200px;
            /*display:inline;*/

<span style="font-family: Arial, Helvetica, sans-serif;">        }</span>#down{
            background: #fc7bff;
            width: 33%;
            height: 100%;
            margin-left: 33%;
        }
        #right{
            background: #ff3ade;
            height:33%;
            width:100%;
            margin-top:-66%;

        }
        img{
            float: left;
            margin: 20px;
        }
    </style>
</head>

<span style="font-family: Arial, Helvetica, sans-serif;"><h1>十字布局</h1></span><div class="spank">
    <div id="down">display：inline设置在一行但是不会覆盖！</div>
    <div id="right">事实证明float是相对于其父节点的，以文字围绕的形式存在（即不覆盖其他的元素），百分比依然是其父节点的相对值</div>
</div>


<img src="../轮播/zyd1.jpg">
<p>一段文字</p>

<div style="border: 1px solid red;float: left;clear:both;">
    content-1<br>
    content-2<br>
    content-3<br>
    清除浮动的目的就是让各个浮动之间互不影响，为了撑起父元素<br>
</div>
<div style="border: 1px solid #563aff;float: right;">
    content6
</div>


<div style="border: solid red 1px;">
    <div style="float: left;width: 80px;height: 80px;border: 1px solid #563aff;">lallla</div>
    <div style="clear: both;border: solid 1px black;">就是为了撑起父节点的,只能写在父节点的子节点下</div>
</div>

以上。float会浮动，但是不覆盖。在父节点的子节点（即其兄弟节点下）设置clear：both可以保证父节点被撑开。