float定位
初始化样式
* {
padding:0px;
margin:0px;
}
html,body {
background-color: lightgray;
width: 100%;
height: 100%;
}
实例一：
#div1{
width: 400px;
height: 200px;
background-color: #FF66FF;
}
#div2{
width: 200px;
height: 200px;
border: solid coral 5px;
float: left;
color: coral;
}
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
</body>
实例二：div2与div1调换顺序
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
</body>
实例三、
#div1 {
width: 400px;
height: 200px;
background-color: #FF66FF;
}
#div2 {
width: 200px;
height: 200px;
border: solid coral 5px;
float: left;
color: coral;
}
#anniu {
width: 80px;
height: 20px;
}
<body>
<input id="anniu" type="button" value="按钮"/>
<div id="div2">
div2
</div>
<div id="div1">
div1
</div>
</body>
总结：float元素对后面的块状元素（span、input、label等）和行状（div、p）元素都会产生影响，对前面的行状（div、p）元素无影响，但是对前面的块状元素产生影响。
另外使用float后 left、top、right、bottom样式将无法使用。
本文转自 yntmdr 51CTO博客，原文链接：http://blog.51cto.com/yntmdr/1655908，如需转载请自行联系原作者