float定位

2017-11-13 23:50:00

初始化样式

* {

padding:0px;

margin:0px;

}

html,body {

background-color: lightgray;

width: 100%;

height: 100%;

实例一：

#div1{

width: 400px;

height: 200px;

background-color: #FF66FF;

#div2{

width: 200px;

border: solid coral 5px;

float: left;

color: coral;

<body>

div1

</div>

div2

</body>

实例二：div2与div1调换顺序

总结：float元素对后面的块状元素（span、input、label等）和行状（div、p）元素都会产生影响，对前面的行状（div、p）元素无影响，但是对前面的块状元素产生影响。

另外使用float后 left、top、right、bottom样式将无法使用。

本文转自 yntmdr 51CTO博客，原文链接：http://blog.51cto.com/yntmdr/1655908，如需转载请自行联系原作者

继续阅读