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