*學(xué)習(xí)筆記
1. 上下排列結(jié)構(gòu)
? ? 上下排列結(jié)構(gòu)可以使用clear屬性清除浮動(dòng)來解決容器疊加問題。屬性值有l(wèi)eft、right、both
如：<style>
????#box1{width:?100px; height:?100px;background:brown;float:?left; }
????#box2{width:?200px;height:?200px;background:seagreen;cursor:?pointer;?clear:?left;
????}
</style>
????<div?id="box1"></div>
????<div?id="box2"></div>
? ? 這樣兩個(gè)div就不會(huì)重疊了，但box1還是脫離了文檔流，相當(dāng)于在二樓而box2在一樓。
2.嵌套排列結(jié)構(gòu)
????①固定寬高：不推薦，不能把高度固定死，不適和做自適應(yīng)的效果。
? ? ②父元素浮動(dòng)：不推薦，因?yàn)楦溉萜鞲?dòng)也會(huì)影響到后面的元素。
????③overflow:hidden：(BFC規(guī)范)如果有子元素想溢出，那么會(huì)受到影響。
????④display:inline-block：(BFC規(guī)范)不推薦，父容器會(huì)影響到后面的元素。
? ? ⑤設(shè)置空標(biāo)簽：不推薦，會(huì)多添加一個(gè)標(biāo)簽。
? ??<style>
????????#box1{width:?200px;border:?1px?solid?red;}
????????#box2{width:?100px; height:?200px; background:seagreen;float:?left;}
????????.clear{clear:?both; }
????</style>
????????<div?id="box1">
????????????<div?id="box2"></div>
????????????<div?class="clear"></div><!--這是一個(gè)空標(biāo)簽-->
????????</div>
? ? ⑥after偽類：推薦，是空標(biāo)簽的加強(qiáng)版，目前各大公司的做法。
????????????（clear屬性只會(huì)操作塊標(biāo)簽，對(duì)內(nèi)聯(lián)標(biāo)簽不起作用）
? ??????<style>
? ? ? ? ? ? ?#box1{ width:?200px; border:?1px?solid?red; ?}
? ? ? ? ? ? ?#box2{ width:?100px; height:?200px; background:seagreen;float:?left; }
????????????.clear:after{ content:?'';clear:?both;display:?block; }
????????</style>
????????<div?id="box1"?class="clear">
????????????<div?id="box2"></div>
????????</div>
