最近在寫js操作css的過程中發(fā)現(xiàn)float屬性一個(gè)問題，覺得很有必要記錄下來，直接先上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實(shí)例 - 折疊面板</title>
<link rel="stylesheet" >
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style=float:left>
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
點(diǎn)擊我進(jìn)行展開，再次點(diǎn)擊我進(jìn)行折疊。第 1 部分
</a>
</h4>
<a style=float:right; href=javascript:copy();>復(fù)制本事件到頂端</a>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
</div>
</div>
</div>
</body>
</html>
網(wǎng)頁的長(zhǎng)相是這樣的：
1.png
很明顯，顯示不是很正常。我們其實(shí)是想用float屬性實(shí)現(xiàn)折疊控件的抬頭區(qū)域左邊和右邊分別可以布局不同的控件，目前看雖然分為左右兩邊這個(gè)目的是達(dá)到了，但是折疊控件抬頭的高度明顯窄了好多。
通過詢問公司的前端大牛，才知道其實(shí)解決方案很簡(jiǎn)單，就是在有float屬性的空間下面加入一行“<div style=clear:both></div>”
加上后的效果：
2.png
為什么會(huì)出現(xiàn)收窄的情況呢？來看看float屬性的定義吧：
定義和用法
float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。
如果浮動(dòng)非替換元素，則要指定一個(gè)明確的寬度；否則，它們會(huì)盡可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動(dòng)元素，那么這個(gè)元素會(huì)跳至下一行，這個(gè)過程會(huì)持續(xù)到某一行擁有足夠的空間為止。
盡可能的窄，也是醉了~ 那這時(shí)候就需要clear樣式屬性出馬了！
我們知道有時(shí)使用了css float浮動(dòng)會(huì)產(chǎn)生css浮動(dòng)，這個(gè)時(shí)候就需要清理清除浮動(dòng)，我們就用clear樣式屬性即可實(shí)現(xiàn)。
下面附上完整源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實(shí)例 - 折疊面板</title>
<link rel="stylesheet" >
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style=float:left>
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
點(diǎn)擊我進(jìn)行展開，再次點(diǎn)擊我進(jìn)行折疊。第 1 部分
</a>
</h4>
<a style=float:right; href=javascript:copy();>復(fù)制本事件到頂端</a>
<div style=clear:both></div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
</div>
</div>
</div>
</body>
</html>
得到幫助的網(wǎng)頁：
http://www.w3school.com.cn/cssref/pr_class_float.asp
http://www.divcss5.com/rumen/r424.shtml
