Css float屬性的一些特點(diǎn)
css布局中float布局是常用的布局方式，用于實(shí)現(xiàn)橫向多列布局慈俯。這個(gè)時(shí)候我們就需要對float屬性的特點(diǎn)進(jìn)行整理，float屬性可以說是學(xué)習(xí)csds布局第一個(gè)難點(diǎn)拥峦，如果不花時(shí)間去整理一下他的特點(diǎn)贴膘，布局的時(shí)候會(huì)挺坑的。
我把float屬性的特點(diǎn)整理為以下幾類略号，1刑峡，對元素本身的影響 2，對父容器的印象 3玄柠，對相鄰元素的影響
1.float屬性對元素本身的影響：
當(dāng)元素沒有設(shè)置寬度值突梦，而設(shè)置了浮動(dòng)屬性，元素的寬度隨內(nèi)容的變化而變化羽利。
例：給元素設(shè)置浮動(dòng)屬性宫患，并指定高度，元素的寬度會(huì)隨著內(nèi)容的寬度的變化而變化这弧。
例 布局1：
<html>
<head>
<title>float屬性的特點(diǎn)測試</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屬性對父元素的影響：
當(dāng)一個(gè)元素的設(shè)置為浮動(dòng)后，它的布局范圍會(huì)超過父元素布局范圍捌年。 并且不能撐開父元素的盒子范圍。如果要把他限制在父元素的盒子范圍需要清除浮動(dòng)挂洛。
例：布局2
<head>
<title>float屬性的特點(diǎn)測試</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屬性對其他元素的影響：
當(dāng)元素設(shè)置浮動(dòng)屬性后柒巫，會(huì)對相鄰的元素產(chǎn)生影響励堡。相鄰元素特指緊鄰后面的元素。
例 布局3：
<head>
<title>float屬性的特點(diǎn)測試</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)只針對緊鄰其后的元素有影響亭畜。
清除浮動(dòng)對緊鄰元素的影響的常用方法有兩種：
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)測試</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排在了大盒子的最左邊囤踩。
