css中float用法
文檔流：瀏覽器根據(jù)元素在html文檔中出現(xiàn)的順序，從左向右，從上到下依次排列。
????
?浮動(dòng)屬性是CSS中的定位屬性，用法如下：
????????float: 浮動(dòng)方向(left、right、none);
??? left為左浮動(dòng)、right為右浮動(dòng)、none是默認(rèn)值表示不浮動(dòng)
??? 設(shè)置元素的浮動(dòng)，該元素將脫離文檔流，向左或向右移動(dòng)
??? 直到它的外邊距碰到父元素的邊框或另一個(gè)浮動(dòng)元素的邊
??? 框?yàn)橹?/strong>
?
float用法（主要用于塊級(jí)元素的并排）：
1、block塊級(jí)元素不指定width的話，默認(rèn)是100%（即會(huì)占一整行）。
2、block塊級(jí)元素不指定width但加入float浮動(dòng)后，其width會(huì)根據(jù)其內(nèi)容長度動(dòng)態(tài)改變，其他塊級(jí)元素可能會(huì)在其左邊或右邊加入。
3、block塊級(jí)元素指定width但加入float浮動(dòng)后，其width不會(huì)根據(jù)其內(nèi)容長度動(dòng)態(tài)改變（文字可能溢出），其他塊級(jí)元素可能會(huì)在其左邊或右邊加入。
4、block塊級(jí)元素加入float浮動(dòng)后，會(huì)脫離標(biāo)準(zhǔn)文檔流，向左或向右移動(dòng)直到它的外邊距碰到父元素的邊框或另一個(gè)浮動(dòng)元素的邊框?yàn)橹埂?/span>
?
示例代碼：
?
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
body{
margin: 0px auto;
padding: 0px;
}
?
.container{
width: 500px;
height: 500px;
border: 1px solid red;
margin:0px auto;/*主面板DIV居中*/
}
?
.header{
height: 100px;
border: 1px solid red;
float: left; /*加入浮動(dòng)*/
}
?
.main{
height: 100px;
width: 100px;
border: 1px solid red;
float: left; /*加入浮動(dòng)*/
}
?
.footer{
height: 100px;
width: 100px;
border: 1px solid red;
float: right; /*加入浮動(dòng)*/
}
</style>
</head>
<body>
<div class="container">
<div class="header">
頭部
</div>
<div class="main">
中間
</div>
<div class="footer">
腳部
</div>
</div>
</body>
</html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/wangzhaofang/p/8304172.html
總結(jié)
以上是生活随笔為你收集整理的css中float用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电视剧《传奇幻想殷商》的内容是？
- 下一篇： 黄芪多少钱一斤啊？