Css float屬性的一些特點(diǎn)
css布局中float布局是常用的布局方式，用于實(shí)現(xiàn)橫向多列布局。這個(gè)時(shí)候我們就需要對(duì)float屬性的特點(diǎn)進(jìn)行整理，float屬性可以說是學(xué)習(xí)csds布局第一個(gè)難點(diǎn)，如果不花時(shí)間去整理一下他的特點(diǎn)，布局的時(shí)候會(huì)挺坑的。
我把float屬性的特點(diǎn)整理為以下幾類，1，對(duì)元素本身的影響 2，對(duì)父容器的印象 3，對(duì)相鄰元素的影響
1.float屬性對(duì)元素本身的影響：
當(dāng)元素沒有設(shè)置寬度值，而設(shè)置了浮動(dòng)屬性，元素的寬度隨內(nèi)容的變化而變化。
例：給元素設(shè)置浮動(dòng)屬性，并指定高度，元素的寬度會(huì)隨著內(nèi)容的寬度的變化而變化。
例 布局1：
<html>
<head>
<title>float屬性的特點(diǎn)測(cè)試</title>
<style type="text/css">
.box1{
float: left;
height: 30px;
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">我是內(nèi)容</div>
</div>
</body>
效果如下：
可以看到當(dāng)我增加元素的內(nèi)容的時(shí)候，元素的寬度增加了：
例：我設(shè)置元素的內(nèi)置為“我是元素增加內(nèi)容”
說明：這里特別指定是布局的元素寬度值會(huì)隨著內(nèi)容的變化而變化，而沒有說高度值。是因?yàn)閴K級(jí)元素的寬度默認(rèn)是占滿一行的，只要設(shè)置float屬性后，才會(huì)隨內(nèi)容的變化而變化，而高度在沒有指明的情況下，本身就是隨內(nèi)容的變化而變化的。
2.float屬性對(duì)父元素的影響：
當(dāng)一個(gè)元素的設(shè)置為浮動(dòng)后，它的布局范圍會(huì)超過父元素布局范圍。 并且不能撐開父元素的盒子范圍。如果要把他限制在父元素的盒子范圍需要清除浮動(dòng)。
例：布局2
<head>
<title>float屬性的特點(diǎn)測(cè)試</title>
<style type="text/css">
.wrap{
border: 4px solid gray;
}
.box1{
float: left;
height: 30px;
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">我是內(nèi)容</div>
</div>
</body>
</html>
例：下面這個(gè)圖的紅框的內(nèi)容是box1元素的父元素，可以看到它的內(nèi)容并沒有被box1元素?fù)伍_，它是浮動(dòng)到了元素的外圍。
如果我們要把父元素?fù)伍_，可以為它的父元素設(shè)置清除浮動(dòng)屬性。
.wrap{
border: 4px solid gray;
overflow: hidden;
}
3.float屬性對(duì)其他元素的影響：
當(dāng)元素設(shè)置浮動(dòng)屬性后，會(huì)對(duì)相鄰的元素產(chǎn)生影響。相鄰元素特指緊鄰后面的元素。
例 布局3：
<head>
<title>float屬性的特點(diǎn)測(cè)試</title>
<style type="text/css">
.wrap{
/*border: 4px solid gray;*/
}
.box1{
float: left;
height: 36px;
background: blue;
}
.box2{
height: 36px;
background: red;
}
.box3{
height: 36px;
background: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
<div class="box3">我是box3</div>
</div>
</body>
</html>
效果如下圖：
可以看到我們給box1設(shè)置了左浮動(dòng)，然后box2受到了浮動(dòng)影響，本來塊級(jí)元素是默認(rèn)一占一行的。但現(xiàn)在box2和box1是一行顯示，說明box2受到了浮動(dòng)的影響。但是box3沒有受到任何影響。因?yàn)楦?dòng)只針對(duì)緊鄰其后的元素有影響。
清除浮動(dòng)對(duì)緊鄰元素的影響的常用方法有兩種：
1.clear屬性：
clear:both;
clear:left;
clear:right;
以布局3為例，我們要清楚box2受到的浮動(dòng)影響，就可以通過給其設(shè)置clear屬性。both表示受到左右浮動(dòng)的印象，left表示受到左浮動(dòng)的影響，right表示受到右浮動(dòng)的影響。
.box2{
height: 36px;
background: red;
clear: left;
}
效果如下： 給box2設(shè)置clear浮動(dòng)屬性后，可以看到box2不會(huì)受到浮動(dòng)的影響，恢復(fù)了塊級(jí)元素的一占一行的默認(rèn)狀態(tài)。
2.同時(shí)設(shè)置windth:100%(或固定寬度)+overflow:hidden;
同樣以布局3為例：給box2元素設(shè)置寬度和overflow:hidden：
.box2{
height: 36px;
background: red;
width: 100%;
overflow: hidden;
}
效果如下：可以看到和清楚浮動(dòng)的效果相同。
這里需要注意的是如果我在這里給 box2設(shè)置固定寬度，而box2寬度沒有超過（父容器寬度-box1的寬度），這個(gè)時(shí)候box1和box2還是會(huì)排成一行。 這種技術(shù)常用于實(shí)現(xiàn)橫向多列布局。
.box2{
height: 36px;
background: red;
width: 100px;
overflow: hidden;
}
效果如下：
補(bǔ)充特點(diǎn)4：
塊級(jí)元素進(jìn)行左浮動(dòng)的時(shí)候，如果前面是有左浮動(dòng)的塊級(jí)元素就排在之前左浮動(dòng)的塊級(jí)元素的后面，如果前面沒有左浮動(dòng)的塊級(jí)元素，只有行內(nèi)元素，那么浮動(dòng)的塊級(jí)元素會(huì)排該盒子容器的最左邊。
右浮動(dòng)同樣如此。
例布局4：
<html>
<head>
<title>float屬性的特點(diǎn)測(cè)試</title>
<style type="text/css">
.wrap{
/*border: 4px solid gray;*/
}
.box1{
float: left;
height: 36px;
background: blue;
}
.box2{
float: left;
height: 36px;
background: red;
}
.box3{
height: 36px;
background: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
<div class="box3">我是box3</div>
</div>
</body>
</html>
這里的box2進(jìn)行左浮動(dòng)，因?yàn)樗暗腷ox1已經(jīng)設(shè)置了左浮動(dòng)，所以box2排在box1之后。
如果，box2之前沒有左浮動(dòng)的塊級(jí)元素，只有行內(nèi)元素，會(huì)是什么效果呢？
可以看到，box2排在了大盒子的最左邊。
