頁面布局產生高度塌陷解決方法
- 高度塌陷
- 當我們在頁面布局的時候經常不小心會發現布局和你想象中的不一樣，有一大的原因是你進行元素浮動的時候產生了浮動常見的bug：高度塌陷也叫高度坍塌
- 為什么會產生這個bug呢？以及這個bug我們應該怎么解決
- 造成高度塌陷的原因：父級元素沒有設定高度，子級元素含有浮動
- 高度塌陷的解決方法：
高度塌陷
當我們在頁面布局的時候經常不小心會發現布局和你想象中的不一樣，有一大的原因是你進行元素浮動的時候產生了浮動常見的bug：高度塌陷也叫高度坍塌
為什么會產生這個bug呢？以及這個bug我們應該怎么解決
造成高度塌陷的原因：父級元素沒有設定高度，子級元素含有浮動
高度塌陷的解決方法：
-
給父級元素添加高度
優點：解決簡單
缺點：就不能做到寬高自適應了 -
在出現高度塌陷的父級元素設定overflow:hidden
優點：可以解決高度塌陷并且能做到自適應，好理解
缺點：超出當前父級元素的盒子都會被隱藏掉 -
在最后一個盒子添加標簽div，設定解決高度塌陷的樣式
默認樣式：clear：both 清除both 所以 left/right
清除浮動的原理：清除浮動元素預留下來的空間，為了放心一個浮動元素，清除了上方預留空間，所以可以解決高度塌陷
優點：出現高度塌陷的地方加一個標簽即可
缺點：添加盒子，出現一些不必要的布局結構，代碼冗余 -
萬能清楚法 – 不好理解,會用就行
在當前出現高度塌陷的元素上添加類名 clear-fix
clear-fix::after{
content:"";
width:100%;
height:0;
display:block;
clear:both;
overflow:hidden;
visibility:hidden;
}
優點：清除方便
缺點：代碼多，難理解
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/96700.html
標籤：AI
上一篇：【原生js】好玩的瀑布流