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可以保证父节点被撑开。