css深入理解之float浮動慕課視訊學習筆記
浮動的特性：包裹與破壞
包裹的特點：收縮堅挺隔絕，江湖人稱BFC
1.浮動具有破壞性，會讓父元素高度塌陷
2.浮動使高度塌陷不是bug，而是標準
3.浮動的原本作用僅僅是為了實現文字環繞效果
4.
給圖片加了float:left後，
5.清除浮動是清除浮動所帶來的的影響的簡稱，因為浮動是一直存在的
（1）腳底插入clear：both
（2）父元素BFC(IE8+)或haslayout(IE6/IE7)。BFC是高階瀏覽器具有的概念。haslayout是IE6IE7私有的
clear和外界直接接觸，eg會發生margin重疊。而BFC是頁面上一個隔離的獨立容器，容器裡外的元素互不影響。eg：浮動不會發生margin重疊
6.
1.在塌陷的父容器底部插入具有clear：both宣告的block水平元素
2.使用after在父元素底部生成一個具有clear：both宣告的偽元素
after在IE8以上才有效
7.BFC不足
一個宣告無法應用於各個場景，因為不能讓所有元素都浮動或都絕對定位
IE8+用上面的
IE6.7用zoom
程式碼少
備註：不要濫用。.clearfix只應該應用在包含浮動子元素的父級元素上
亂入的haslayout往往會讓IE6.7做出出格的事情
浮動也會觸發haslayout，再加上浮動本身就有破壞性，所有浮動在IE67下更顯魔性
8. 浮動可以使元素block塊狀化（磚頭化）
砌磚佈局的問題：容錯性糟糕，容易出問題
這種佈局需要元素固定尺寸，很難重複使用
在低版本的IE下會有很多問題
綜上所述，少用砌磚佈局
可以破壞性造成的緊密排列特性（去空格化）詳見視訊5.1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮動去空格</title>
<style>
button { margin: 0; }
p { clear: both; }
</style>
</head>
<body>
<button>按鈕1</button><button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<p><input type="button" id="trigger" value="點選按鈕浮動"></p>
<script>
var trigger = document.getElementById("trigger"),
buttons = document.getElementsByTagName("button");
var length = buttons.length;
if (trigger && length > 0) {
trigger.onclick = function() {
for (var index = 0; index < length; index += 1) {
buttons[index].style["cssFloat" in trigger.style? "cssFloat": "styleFloat"] = "left";
}
};
}
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮動與display:block化</title>
<style>
.ovh { overflow: hidden; }
.red { color: #cd0000; }
[hidden] { display: none; }
</style>
</head>
<body>
<p id="first">這是一個沒有設定<code>float</code>屬性的按鈕：</p>
<p class="ovh"><input type="button" id="btnShow" value="點選我顯示display屬性值"></p>
<p hidden="">此時，按鈕的display屬性值是：<span id="result" class="red"></span></p>
<p>點選下面的按鈕讓上面的按鈕新增<code>float: left</code>的宣告：</p>
<p><input type="button" id="btnAdd" value="上面的按鈕新增float:left"></p>
<script>
var btnShow = document.getElementById("btnShow"),
btnAdd = document.getElementById("btnAdd"),
result = document.getElementById("result"),
first = document.getElementById("first");
if (btnShow && btnAdd && result) {
btnShow.onclick = function() {
// 獲得該按鈕的display值
var display = this.currentStyle? this.currentStyle.display: window.getComputedStyle(this, null).display;
// 顯示結果
result.innerHTML = display;
result.parentNode.removeAttribute("hidden");
// repain fix IE7/IE8 bug
document.body.className = "any";
};
// 設定浮動按鈕的點選事件
btnAdd.onclick = function() {
btnShow.style["cssFloat" in this.style? "cssFloat": "styleFloat"] = "left";
// 文字描述的變化
this.value = "上面的按鈕已經設定了float:left";
btnShow.value = "再次點選我確認display屬性值";
first.innerHTML = first.innerHTML.replace("沒有", '<del>沒有</del>');
// 結果隱藏
result.parentNode.setAttribute("hidden", "");
// 按鈕禁用
this.setAttribute("disabled", "");
};
}
</script>圖片沒有上傳上去。。。。。。有空再補吧