清除浮動:
- 方法：clear清除浮動（添加空div法）
在浮動元素下方添加空div,并給該元素寫css樣式： {clear:both;height:0;overflow:hidden;} - 方法：給浮動元素父級設(shè)置高度
缺點(diǎn)：在浮動元素高度不確定的時(shí)候不適用 - 方法：以浮制?。ǜ讣壨瑫r(shí)浮動）
缺點(diǎn)：需要給每個(gè)浮動元素父級添加浮動，浮動多了容易出現(xiàn)問題。 - 父級設(shè)置成inline-block
缺點(diǎn)：父級的margin左右auto失效，無法使用margin: 0 auto;居中了 - br 清浮動:
<div class="box">
<div class="top"></div>
<br clear="both" />
</div>
br 標(biāo)簽自帶clear屬性，將它設(shè)置成both其實(shí)和添加空div原理是一樣的;
不符合工作中：結(jié)構(gòu)、樣式、行為，三者分離的要求. - 給父級添加overflow:hidden 清浮動方法；
需要配合 寬度 或者 zoom 兼容IE6 IE7；
overflow: hidden;
*zoom: 1; - 萬能清除法 after偽類 清浮動（現(xiàn)在主流方法，推薦使用）
選擇符:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
同時(shí)為了兼容 IE6，7 同樣需要配合zoom使用例如：
①.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
②.clear{zoom:1;}
需要注意的東西：
after偽類： 元素內(nèi)部末尾添加內(nèi)容；
:after{content"添加的內(nèi)容";} IE6，7下不兼容
zoom 縮放 ：
a、觸發(fā) IE下 haslayout，使元素根據(jù)自身內(nèi)容計(jì)算寬高。
b、FF 不支持；
塊級元素和行內(nèi)元素
在標(biāo)準(zhǔn)文檔流里面 塊級元素具有以下特點(diǎn)：
①總是在新行上開始，占據(jù)一整行；
②高度，行高以及外邊距和內(nèi)邊距都可控制；
③寬帶始終是與瀏覽器寬度一樣，與內(nèi)容無關(guān)；
④它可以容納[內(nèi)聯(lián)元素])和其他塊元素。
行內(nèi)元素的特點(diǎn)：
①和其他元素都在一行上；
②高，行高及外邊距和內(nèi)邊距部分可改變；
③寬度只與內(nèi)容有關(guān)；
④行內(nèi)元素只能容納文本或者其他行內(nèi)元素。
不可以設(shè)置寬高，其寬度隨著內(nèi)容增加，高度隨字體大小而改變，內(nèi)聯(lián)元素可以設(shè)置外邊界，但是外邊界不對上下起作用，只能對左右起作用，也可以設(shè)置內(nèi)邊界，但是內(nèi)邊界在ie6中不對上下起作用，只能對左右起作用。
塊級元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
行內(nèi)元素：span, strong, em, br, img , input, label, select, textarea, cite,
轉(zhuǎn)換的方式是用css的display屬性:
display:block; // 轉(zhuǎn)換為塊級
display:inline; // 轉(zhuǎn)換為行內(nèi)
隱藏元素
- 方法：display:none;
"display:none;"后瀏覽器不會解析該元素，“none”就是沒有，消失了，所以他不會再文檔流中占位。 - 方法：visibility:hidden
hidden”也就是隱藏了，但是它所在的位置仍然還在，就像你把你個(gè)文件給隱藏了，但是這個(gè)文件在你的硬盤中仍然是占據(jù)一定空間的，只是你看不見而已， 它不會導(dǎo)致瀏覽器重排和重繪 。
