1.問題
2.解決
【1】給父元素(box1)設(shè)置高度，在企業(yè)開發(fā)中能不寫高度就不寫高度，所以通常不采用
原理：
【2】方法2：使用clear屬性right，both，left，none（默認(rèn))
none:默認(rèn)取值，按照浮動(dòng)元素的排序規(guī)則來(lái)排序（左找左，右找右）
left:不要找前面左浮動(dòng)的元素
right：不要找前面有浮動(dòng)的元素
both：即不找左也不找右 ----企業(yè)常用這個(gè)
原理：不要去找前面的浮動(dòng)元素
給后面的盒子添加clear屬性
注意:
當(dāng)我們給如果給該元素設(shè)置了clear屬性，那么margin對(duì)它是無(wú)效了
【3】方法三
隔墻法：外墻法，內(nèi)墻法 ?不常用代碼閱讀量降低
外墻法：在第一個(gè)盒子和第二盒子之間加一個(gè)塊級(jí)元素，然后設(shè)置clear屬性，第二個(gè)盒子的margin-top可以用的，但是第一個(gè)盒子的margin-bottom是沒有用的，只需要給加的這個(gè)塊級(jí)元素加一個(gè)高度就可以了 ?企業(yè)喜歡用
內(nèi)墻法：添加一個(gè)塊級(jí)元素添加到第一個(gè)盒子的最后一個(gè)元素的后面，給新的元素設(shè)置clear屬性
注意點(diǎn):第二個(gè)盒子的margin-top可以用的，但是第一個(gè)盒子的margin-bottom是有用的，還可以給額外的元素添加高度
兩者的區(qū)別：
內(nèi)墻法可以撐起盒子1的高度，外墻法不可以
【3】方法四 ? ?這個(gè)最推薦的方式
偽元素 ?給指定標(biāo)簽的內(nèi)容添加一個(gè)子元素，或者給指定標(biāo)簽的內(nèi)容后面添加一個(gè)子元素,沒有高度，visibility：hide將添加的子元素隱藏了
div::before{ ? ? ? ? ? ? ? ? ? ??
content:"";
display:block;
}
div::after{
content:"";
display:block;
}
第四個(gè)方式類似內(nèi)墻法
注意點(diǎn)，兼容問題要加入一句話來(lái)兼容IE6
.box1{
*zoom:1;
}
【5】清除浮動(dòng)的方式5
overflow：hidden可以將超出標(biāo)簽范圍的內(nèi)容裁剪掉，可以用來(lái)清除浮動(dòng),
給第一個(gè)盒子設(shè)置overflow屬性
考慮兼容IE6
.box1{
*zoom:1;
}
overflow的第三個(gè)好處：可以通過它讓里面的盒子設(shè)置margin-top外邊的盒子不會(huì)被頂下來(lái)
