目录：

内容：

//设置左右浮动
.left{float:left;
}
.right{float:right;
}
/*必须设置不同浮动*/
//创建div
<div>
<dic class="left">左边</div>
<div class="right">右边</div>
</div>

//设置浮动
.left{width:50%;height:200px;background:pink;float:left;
}
.right{width:50%;height:200px;background:deepskyblue;float:right;
}
.center{width:100%;height:200px;background:orange;
//在被影响的标签里添加clear:both/* clear:both; */
}
.clear{clear:both;
}
//创建div
<div class="box"><div class="left">左边</div><div class="right">右边</div><div class="clear"></div><div class="center"></div>
</div>

//使用::after伪对象
.box::after{content:'';width:0;height:0;display:block;clear:both;visibility: hidden;overflow: hidden;zoom:1;} 
//设置浮动
.left{width:50%;height:200px;background:pink;float:left;
}
.right{width:50%;height:200px;background:deepskyblue;float:right;
}
.center{width:100%;height:200px;background:orange;
}
//创建div
<div class="box"><div class="left">左边</div><div class="right">右边</div>
</div>
<div class="center"></div>

//设置浮动
.left{width:50%;height:200px;background:pink;float:left;
}
.right{width:50%;height:200px;background:deepskyblue;float:right;
}
.center{width:100%;height:200px;background:orange;
//给被影响的元素添加overflow:hiddenoverflow:hidden;
}//创建div
<div class="box"><div class="left">左边</div><div class="right">右边</div><div class="center"></div>
</div>

.one{width:300px;height:300px;background:red;overflow:hidden;
}
.two{width:100px;height:100px;background:deepskyblue;margin-top:100px;
/* float:left; */
position:absolute;
}
//设置div
<div class="one"><div class="two"></div>
</div>

.one{width:300px;height:300px;background:red;
}
.two{width:100px;height:100px;background:deepskyblue;margin-top:100px;float:left;
}
//设置div
<div class="one"><div class="two"></div>
</div>

.one{width:300px;height:300px;background:red;
}
.two{width:100px;height:100px;background:deepskyblue;margin-top:100px;position:absolute;
}
//设置div
<div class="one"><div class="two"></div>
</div>