html结构
<div class="div0">
<div class="div1" ></div>
<div class="div2"></div>
</div>
CSS结构
<style>
.div0 {
width: 300px;
height: 100px;
/*float: right;*/
background-color: blue;
}
.div1{
width: 100px;
height: 100px;
float: left;
background-color: green;
}
.div2{
width: 100px;
height: 100px;
float: left;
background-color: red;
}
</style>
如果div1和div2不浮动,div0浮动,那么div1和div2也会浮动起来(半浮动,即脱离页面流,但是性质没有变,还是各占一行)
不论父元素是否浮动,都不影响子元素的性质
相对于float,position的 absoluted 的优先级好像更高,即absolute的元素会在float元素的上一层,遮挡住float元素
float元素依然可以使用margin
情况一(浮动占据空间):浮动元素后紧随的标签果是 内联 或 内联块元素。
情况二 (浮动不占据空间):浮动元素后紧随的 是 块级元素 或者图片的时候。