整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
例
讓圖像向右側浮動：
img
{
float:right;
}
屬性定義及使用說明
float屬性指定一個盒子（元素）是否應該浮動。
注意： 絕對定位的元素忽略float屬性！
| 默認值： | none |
|---|---|
| 繼承： | no |
| 版本： | CSS1 |
| JavaScript 語法： | object.style.cssFloat="left" |
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
屬性值
| 值 | 描述 |
|---|---|
| left | 元素向左浮動。 |
| right | 元素向右浮動。 |
| none | 默認值。元素不浮動，并會顯示在其在文本中出現的位置。 |
| inherit | 規定應該從父元素繼承 float 屬性的值。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
、有float屬性的元素會跑
代碼：<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
CSS：div{ width: 50px; height: 50px; }
#box1{background: blue; float: left;}
#box2{ background: red;float: left; }
#box3{background: black;float: left; }
在瀏覽器中的樣式：
從圖中可以看出，div本為塊級標簽，本應各自占一行，但是添加浮動屬性之后，都向左浮動，跑到了一排。
二、如果上一行沒有float元素，那么float元素是跑不上去的
代碼：<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
CSS：div{ width: 50px; height: 50px; }
#box1{background: blue;}
#box2{ background: red;float: left; }
#box3{background: black;float: left; }
從圖中可以看出，div1沒有floa屬性，所以div2不能浮動上去；而div2有浮動屬性，所以div3會浮動上來。
三、有float屬性的元素是脫離文檔流的，非浮動元素會忽略掉前面的浮動元素
代碼：<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
CSS：div{ width: 50px; height: 50px; }
#box1{background: blue;float:left;}
#box2{ background: red;float: left; }
#box3{background: black;width:150px;height:100px; }
在瀏覽器中的樣式：
從圖中可以看出，div1和div2浮動在文檔之上，div3忽略了div1和div2，div1和div2沒有影響div3的位置。
海無涯，不要沉浸在知識的海洋里，迷失自己。
要知道自己想要什么，抓住重點，不忘初心。
這個世界上百分之20的人，掌握著百分之80的財富。
接下來一系列教程，就帶領大家抓住重點，一起做那百分之20的人。
往期知識點回顧：
重點屬性-display
重點屬性-position
重點屬性-flex
重點屬性-background
重點屬性-media
重點屬性-overflow
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
元素同時設置了浮動和絕對定位，則浮動是沒有效果
定位了的元素永遠能壓住沒有定位的元素，即上面的解釋：絕對定位能壓住浮動的元素
答案1：給父級div定義偽類：after和zoom
/*清除浮動代碼*/
.clearfloat:after{display:block;
clear:both;content:"";
visibility:hidden;
height:0}
.clearfloat{zoom:1}
復制代碼然后父級元素添加clearfloat類名即可
答案2：給父級元素定義 overflow:hidden（推薦使用，缺點：不能和position配合使用，因為超出的尺寸的會被隱藏）
div{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
復制代碼span{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
復制代碼將帶有邊框和邊界的圖像浮動于段落的右側
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
