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，如需轉載請自行聯系原作者

繼續閱讀