正常情況耻煤，div為塊級元素
紅色塊設(shè)置為靠右浮動(dòng)，碰到邊框停止
浮動(dòng)元素脫離普通流舅逸。覆蓋了綠色
屏幕快照 2017-05-21 下午4.59.07.png
屏幕快照 2017-05-21 下午5.00.37.png
div無法意識到浮動(dòng)元素的存在，但div中的文本意識到它的存在，會(huì)在周圍開始排列匙头，如果無法排列，則會(huì)從下一行開始排列
1浮動(dòng)后仔雷，box 2沒有意識到蹂析，直接上去跑到地下，被1給遮蓋了碟婆，但2的文本內(nèi)容意識到了1的浮動(dòng)电抚，于是圍繞在1的周圍，和3重疊了竖共。
box1浮動(dòng)后蝙叛，box2上移到box1的位置，一部分被遮蓋公给，但是其中文字向box1周圍浮動(dòng)
box1和box2都浮動(dòng)后借帘，包含他們的div 無法感知到任意一個(gè)的存在
為了阻止外邊距合并，只要讓其中一個(gè)box屬于另一個(gè)bfc就行淌铐。
兩個(gè)元素嵌套姻蚓，ct嵌套了h1的時(shí)候，給其中的一個(gè)元素設(shè)置了margin 匣沼，顯示會(huì)被掩蓋狰挡，這個(gè)時(shí)候需要把父元素設(shè)置為bfc ,padding,border,overflow設(shè)置為
BFC不會(huì)重疊浮動(dòng)元素，可以分欄释涛，通過給圍繞的元素設(shè)置為bfc
將ct設(shè)置為float可以生產(chǎn)bfc塊級元素效果
微信截圖_20170523132342.png
1.png
微信截圖_20170523133218.png
圖片發(fā)自簡書App
當(dāng)元素相對于父元素絕對定位時(shí)加叁，如果父元素本身有padding,則默認(rèn)情況的absolute是相對于padding進(jìn)行定位，也就是會(huì)去掉padding唇撬。如果需要緊挨邊框它匕，則需要設(shè)置left 和right的值。
不設(shè)置寬度窖认，默認(rèn)情況下是撐開的豫柬。當(dāng)設(shè)置position:absolute 或float之后會(huì)收縮為一個(gè)內(nèi)容的寬度告希。因此，需要為box設(shè)置一個(gè)固定寬度
width:100%為自己的content等于父容器的content寬度的100%烧给。因?yàn)楸旧韕osition:absolute為auto燕偶，相當(dāng)于有padding的偏移，因此需要設(shè)置left:0
去掉border正合適
如何讓一個(gè)box垂直居中于父元素盒子
relative偏移沒有脫離文件流础嫡，旁邊元素仍然以為它占據(jù)原來位置
margin-top 偏移指么，是整體一起偏移，文檔流的位置發(fā)生偏移
作業(yè)代碼1
代碼1：http://js.jirengu.com/tume/1/edit?html,css,output
代碼2：http://js.jirengu.com/yine/1/edit?html,css
代碼3:http://js.jirengu.com/xewir/1/edit?html,css,output
代碼4:http://js.jirengu.com/ravud/1/edit?html,css,output
浮動(dòng)元素有什么特征榴鼎？對父容器伯诬、其他浮動(dòng)元素、普通元素巫财、文字分別有什么影響?
浮動(dòng)元素是一種可視化格式模型盗似，可以設(shè)置為左右浮動(dòng)，浮動(dòng)的元素會(huì)脫離文件普通流平项，周圍的普通元素會(huì)表現(xiàn)得好像它不存在一樣桥言，占據(jù)它原來的位置，但周圍的文字內(nèi)容會(huì)察覺到浮動(dòng)元素位置的變動(dòng)葵礼，因此會(huì)圍繞其周圍排布。
如果一個(gè)父容器的子元素是浮動(dòng)元素并鸵，且父容器沒有設(shè)置高度鸳粉，那么父容器會(huì)坍塌失去高度。
清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
當(dāng)容器高度設(shè)置為auto园担，且容器內(nèi)容中有浮動(dòng)的元素存在届谈，這種情況下，容器的高度不能自動(dòng)伸縮適應(yīng)內(nèi)容的高度弯汰，使得內(nèi)容過場溢出到容器之外艰山，這叫做浮動(dòng)溢出，因此需要清除浮動(dòng)處理咏闪。
屏幕快照 2017-05-30 下午8.43.14.png
屏幕快照 2017-05-30 下午9.49.26.png
