資訊專欄INFORMATION COLUMN
摘要：如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。用屬性來指定要插入的內(nèi)容。的作用是允許瀏覽器渲染它，但是不顯示出來。這個(gè)元素的作用就像元素它定義了一個(gè)塊級(jí)盒子有兩個(gè)特性同行等高寬度自動(dòng)調(diào)節(jié)。
浮動(dòng)造成的常見問題有哪些？ 兄弟元素排版錯(cuò)亂
內(nèi)聯(lián)元素（行內(nèi)元素）
如果該兄弟元素是內(nèi)聯(lián)元素，內(nèi)聯(lián)元素會(huì)盡可能的圍繞在浮動(dòng)元素的周圍
塊級(jí)元素
如果該兄弟元素是塊等元素，塊級(jí)元素會(huì)無視浮動(dòng)元素，并且一定程度的覆蓋浮動(dòng)元素，
文本是屬于行內(nèi)匿名元素，所以會(huì)浮動(dòng)在內(nèi)聯(lián)元素周圍，實(shí)際div已經(jīng)嘗試了覆蓋
會(huì)在元素?fù)Q行上有疑問，或許你還會(huì)想著通過寬度來解決這個(gè)換行問題
因?yàn)樵馗?dòng)，和未浮動(dòng)的父元素不在同一個(gè)文檔流當(dāng)中，浮動(dòng)的元素不能撐起來父元素的高度為什么會(huì)造成這種現(xiàn)象？
使用用浮動(dòng)會(huì)讓元素脫離普通流，完成各種定位的同時(shí)，會(huì)帶來了許多后遺癥
如何解決浮動(dòng)帶來的問題？ 方法一：clear：both含義
不允許改元素的兩邊有浮動(dòng)的元素
使用情況
更適合用于需要換行，卻因浮動(dòng)換行失敗的情況
空div是什么個(gè)意思？
換行也存在兩種可能性，一種是他緊鄰的兄弟元素要換行，那再這個(gè)元素上直接添加clear:both就好，
還有一種是這個(gè)元素接下來的元素都要換行，那么我們就悄悄的呢添加一個(gè)其實(shí)沒有任何意義的div，寫上一個(gè)類，里面有clear:both;
還要有height:或者0 line-height: 0;要不然會(huì)換行了背景還是會(huì)塌陷
含義
overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。
hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。
auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
auto對(duì)seo較為友好
使用情況
float造成的盒子塌陷
為什么不是裁剪跨出邊界的元素，反而是撐高？
牽涉到BFC機(jī)制，overflow:hidden 的意思是超出的部分要裁切隱藏掉，
那么如果float 的元素不占普通流位置普通流的包含塊要根據(jù)內(nèi)容高度裁切隱藏，
如果高度是默認(rèn)值auto那么不計(jì)算其內(nèi)浮動(dòng)元素高度就裁切就有可能會(huì)裁掉float，
這是反布局常識(shí)的， 所以如果沒有明確設(shè)定容器高情況下它要計(jì)算內(nèi)容全部高度才能確定在什么位置， hidden浮動(dòng)的高度就要被計(jì)算進(jìn)去順帶達(dá)成了清理浮動(dòng)的目標(biāo)。
簡(jiǎn)單說就是overflow會(huì)開啟一個(gè)計(jì)算高度的機(jī)制，而這個(gè)機(jī)制的計(jì)算包括float
兼容性
IE6 中需要觸發(fā) hasLayout ——為父元素設(shè)置容器寬高或設(shè)置 zoom：1
含義
after 選擇器在被選元素的內(nèi)容后面插入內(nèi)容。
用 content 屬性來指定要插入的內(nèi)容。有點(diǎn)貴像空div的高級(jí)版
寫法一
div-float:left
div-float:left
div-float:left
div-無float
第二個(gè)大盒子
寫法二
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
zoom:1;
}
解析
用after:偽元素在需要清除浮動(dòng)的大盒子外邊添加了一個(gè)看不見（visibility）但是有高度（高度為0）的空內(nèi)容塊。
visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來。
display:table,這個(gè)元素的作用就像
