久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

## 一、什么是高度塌陷 在文檔流中，若父元素未設(shè)置高度，那么父元素的高度默認(rèn)是被子元素?fù)伍_的，即子元素多高，父元素就有多高。但是當(dāng)子元素設(shè)置浮動之后，子元素就會完全脫離文檔流，父元素還在文檔流中，此時(shí)父元素的高度就沒有子元素?fù)纹穑ㄗ釉責(zé)o法撐起父元素的高度），從而導(dǎo)致父元素的高度塌陷。簡單來說，就是包含含有浮動的元素的上一級元素的高度變?yōu)?了，下面的元素會上去，這樣會導(dǎo)致頁面布局混亂。 ``` <div class="parent"> <div class="child"></div> <div class="child"></div> </div> .parent { width: 300px; border: 5px solid #f00; } .child { float: left; width:100px; height: 100px; border: 5px solid #00f; } ``` ## 二、解決方法 #### 1、父元素結(jié)束之前添加一個(gè)標(biāo)簽 `<div style="clear:both;"></div>` ``` <div class="parent"> <div class="child"></div> <div class="child"></div> <div style="clear:both;"></div> </div> <div class="bottom"></div> .parent { border: 5px solid #f00; } .child { float: left; width: 100px; height: 200px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } ``` 缺點(diǎn)：增加了無意義的標(biāo)簽 #### 2、讓父元素本身也浮動 float：left; ``` <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="bottom"></div> .parent { float: left; border: 5px solid #f00; } .child { float: left; width: 100px; height: 100px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } ``` 缺點(diǎn)：雖然可以撐開父元素，但是會導(dǎo)致父元素的寬度丟失，而且會導(dǎo)致下邊的元素上移,使得跟父元素相鄰的元素的布局受到影響 #### 3、給父元素一個(gè)固定高度，此方法適用于子元素高度已知并且固定的情況 ``` <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="bottom"></div> .parent { height: 100px; border: 5px solid #f00; } .child { float: left; width: 100px; height: 100px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } ``` 缺點(diǎn)：父元素與子元素的邊框會重疊，無法自適應(yīng)子元素的高度 #### 4、給父元素設(shè)置display: inline-block; ``` <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="bottom"></div> .parent { display: inline-block; border: 5px solid #f00; } .child { float: left; width: 100px; height: 100px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } ``` 缺點(diǎn)：會導(dǎo)致父元素的寬度丟失，與相鄰元素會產(chǎn)生額外的間距 #### 5、給父元素設(shè)置 overflow : hidden; ``` <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="bottom"></div> .parent { overflow: hidden; border: 5px solid #f00; } .child { float: left; width: 100px; height: 100px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } ``` 缺點(diǎn)：要是子元素要margin負(fù)值定位或是負(fù)的position定位，溢出部分會被裁掉，如二級菜單的影響 #### 6、通過after偽類，after + zoom方法（推薦） ``` <div class="parent clearAll"> <div class="child"></div> <div class="child"></div> </div> <div class="bottom"></div> .parent { border: 5px solid #f00; } .child { float: left; width: 100px; height: 100px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } .clearAll:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } .clearAll { zoom : 1; } ``` 利用偽類來清除浮動，其效果跟創(chuàng)建一個(gè)空的div并設(shè)置其為 clear：both 是一樣的，只不過這里用偽類代替了空的div元素，不會影響任何其他樣式，通用性強(qiáng)，覆蓋面廣。