css解决高度塌陷
觸發(fā)條件
設(shè)置元素脫離文檔流，就無法撐開父元素的高度，導(dǎo)致父元素的高度丟失，使得頁面布局發(fā)生混亂。
解決方法一：
給父元素添加固定高度。/* height: 100px; */
缺點:不適合高度自適應(yīng)的布局，不推薦使用
代碼：
<style>.outer {border: 10px red solid;/* height: 100px; */}.inner {width: 100px;height: 100px;background-color: blue;float: left;}.box3 {height: 100px;background-color: yellow;}</style><body><div class="outer"><div class="inner"></div></div><div class="box3"></div></body>
解決方法二：
開啟BFC
如何開啟元素的BFC：
? ? ? 1.設(shè)置元素浮動（不推薦）/* float: left; */
? ? ? ? 使用這種方式開啟，雖然可以撐開父元素，但是會導(dǎo)致父元素的寬度丟失，而且使用這種方式也會導(dǎo)致下邊的元素上移，不能解決問題
? ? ? 2.設(shè)置元素為inline-block（不推薦）/* display: inline-block; */
? ? ? ? ?可以解決問題，但是會導(dǎo)致寬度丟失，不推薦使用這種方式
? ? ? 3.將元素的overflow設(shè)置為一個非visible的值 /* overflow: hidden; */（推薦）
? ? ? 4.設(shè)置元素絕對定位 /* position: absolute; */
? ? ? ? ?元素也會脫離文檔流，雖然可以撐開父元素，但是會導(dǎo)致父元素的寬度丟失，而且使用這種方式也會導(dǎo)致下邊的元素上移，不能解決問題
解決方法三：
給所有的浮動盒子最后添加一個空的標(biāo)簽：例如 div,且添加聲明 clear:both;
可以直接在高度塌陷的父元素的最后，添加一個空白的div，由于這個div并沒有浮動，所以他是可以撐開父元素的高度的，然后在對其進(jìn)行清除浮動，這樣可以通過這個空白的div來撐開父元素的高度
缺點:多了很多空的標(biāo)簽,造成代碼冗余。
代碼：
<style type="text/css">.box1 {border: 10px solid red;}.box2 {width: 100px;height: 100px;background-color: blue;float: left;}.box3{clear: both;}</style><body><div class="box1"><div class="box2">box2</div><div class="box3"></div></div></body>
解決方法四：
萬能清除浮動法。
給塌陷的父元素:after{content:"";display:block;clear:both; }
可以通過after偽類向元素的最后添加一個空白的塊元素，然后對其清除浮動，這樣做和添加一個div的原理一樣，可以達(dá)到一個相同的效果，而且不會在頁面中添加多余的div，這是我們最推薦使用的方式。
.box1:after {
? ? ? ? /*添加一個內(nèi)容*/
? ? ? ? content: "";
? ? ? ? /*轉(zhuǎn)換為一個塊元素*/
? ? ? ? display: block;
? ? ? ? /*清除兩側(cè)的浮動*/
? ? ? ? clear: both;
代碼：
? ??
<style>.box1 {border: 10px solid red;}.qq::after{content: '';display: block;clear: both;}.box2 {width: 100px;height: 100px;background-color: blue;float: left;}</style><body><div class="box1 qq"><div class="box2"></div></div><div class="box3 qq"></div></body>總結(jié)
- 上一篇： 单位弹性需求曲线形状_需求曲线为直线时，
- 下一篇： 计算机制作灯笼,做灯笼日记