詳解CSS布局中浮動(dòng)問題的四種解決方案
我要評(píng)論一、起因：
子盒子設(shè)置浮動(dòng)之后效果：
由此可見，藍(lán)色的盒子設(shè)置浮動(dòng)之后，因?yàn)槊撾x了標(biāo)準(zhǔn)文檔流，它撐不起父盒子的高度，導(dǎo)致父盒子 高度塌陷 。如果網(wǎng)頁中出現(xiàn)了這種問題，會(huì)導(dǎo)致我們整個(gè)網(wǎng)頁的布局紊亂
二、解決方案：
- 父盒子設(shè)置固定高度------------------給父元素添加固定的高度
- 內(nèi)墻法 -------------------------------在父元素的后面添加一個(gè)空的div添加樣式為 clear:both
- 偽元素清除法-------------------------給父元素類名添加一個(gè)類叫 clearfix （推薦）
- overflow:hidden---------------------給父元素樣式添加 overflow:hidden
（1）父盒子設(shè)置固定高度
雖然，給父盒子設(shè)置了固定高度能暫時(shí)解決我們的問題，但是它的使用不靈活，如果未來子盒子的高度需求發(fā)生了改變(網(wǎng)頁的多處地方)，那么我們得手動(dòng)需要更改父盒子的高度。后期不易維護(hù)。
應(yīng)用：網(wǎng)頁中盒子固定高度區(qū)域，比如固定的導(dǎo)航欄。
缺點(diǎn)：使用不靈活，后期不易維護(hù)
（2）內(nèi)墻法
在浮動(dòng)元素的后面加一個(gè)空的 塊級(jí)元素 (通常是div),并且該元素設(shè)置 clear:both； 屬性。clear屬性，字面意思就是清除，那么both,就是清除浮動(dòng)元素對(duì)我左右兩邊的影響。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮動(dòng)元素的破壞性</title>
<style type="text/css">
.father{
border: 1px solid red;
}
.child{
width: 200px;
height: 200px;
float: left;
background-color: green;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="child">兒子</div>
<div class="clearfix"></div>
</div>
</body>
</html>
應(yīng)用：網(wǎng)頁中應(yīng)用不多，只是為了引導(dǎo)下一個(gè)清除浮動(dòng)的方式。
缺點(diǎn)：結(jié)構(gòu)冗余
（3）偽元素清除法
內(nèi)墻法是在浮動(dòng)元素的后面加一個(gè)空的 塊級(jí)元素 (通常是div),并且該元素設(shè)置 clear:both； 屬性。
那么正好在css3的屬性用法中整好有個(gè)選擇器也完全符合這個(gè)用法，偽元素選擇器。它就像偽類一樣，讓偽元素添加了選擇器，但不是描述特殊的狀態(tài)，允許為元素的 某些部分設(shè)置樣式 。
表示在p標(biāo)簽元素的最后面添加樣式，同時(shí)這也正好符合內(nèi)墻法的用法。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮動(dòng)元素的破壞性</title>
<style type="text/css">
.father{
border: 1px solid red;
}
.child{
width: 200px;
height: 200px;
float: left;
background-color: green;
}
.cleafix:after{
content:'.';
display: block;
clear: both;
overflow: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="child">兒子</div>
</div>
</body>
</html>
當(dāng)以后需要清除浮動(dòng)時(shí)只需要在標(biāo)簽中再添加一個(gè) “clearfix” 類就行，十分的方便快捷 ！
編寫的偽元素清除法內(nèi)容解釋：
.clearfix:after{
content:''; 表示給.clearfix元素內(nèi)部最后添加一個(gè)內(nèi)容，該內(nèi)容為行內(nèi)元素。
display: block; 設(shè)置該元素為塊級(jí)元素，符合內(nèi)墻法的需求。（有的地方使用table，因?yàn)閠able也是一個(gè)塊級(jí)元素）
clear: both; 清除浮動(dòng)的方法。必須要寫
overflow: hidden; 如果用display:none;,那么就不能滿足該元素是塊級(jí)元素了。overflow:hidden;表示隱藏元素，但是該元素占位置；而display:none;不占位置。
height: 0;
}
此處梳理一下：after（偽類）和：：after（偽元素）的區(qū)別
相同點(diǎn)
- 都可以用來表示偽類對(duì)象，用來設(shè)置對(duì)象前的內(nèi)容
- :before和::before寫法是等效的; :after和::after寫法是等效的，版本不同而已
不同點(diǎn)
- :before/:after是Css2的寫法，::before/::after是Css3的寫法
- :before/:after 的兼容性要比::before/::after好 ，
- 不過在H5開發(fā)中建議使用::before/::after比較好
注意
- 這些偽元素 要配合content屬性一起使用
- 這些偽元素 不會(huì)出現(xiàn)在DOM中，所以不能通過js來操作，僅僅是在 CSS 渲染層加入
- 這些偽元素 的特效通常要使用:hover偽類樣式來激活
（4）overflow:hidden
CSS屬性overflow定義一個(gè)元素的內(nèi)容太大而無法適應(yīng)盒子的時(shí)候該做什么。它是overflow-x和overflow-y的簡(jiǎn)寫屬性
overflow屬性不僅僅能實(shí)現(xiàn)以上效果，那么當(dāng)一個(gè)元素設(shè)置了overflow:hidden|auto|scroll屬性之后，它會(huì)形成一個(gè)BFC區(qū)域，我們叫做它為 塊級(jí)格式化上下文 。
BFC只是一個(gè)規(guī)則。它對(duì)浮動(dòng)定位都很重要。浮動(dòng)定位和清除浮動(dòng)只會(huì)應(yīng)用于同一個(gè)BFC的元素。
浮動(dòng)不會(huì)影響其它BFC中元素的布局，而清除浮動(dòng)只能清除同一BFC中在它前面的元素的浮動(dòng)。
優(yōu)點(diǎn)：代碼簡(jiǎn)潔
缺點(diǎn)：內(nèi)容增多的時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示要溢出的元素
總結(jié)：只要我們讓父盒子形成BFC的區(qū)域，那么它就會(huì)自動(dòng)清除區(qū)域中浮動(dòng)元素帶來的影響 。
哪些會(huì)形成BFC區(qū)域：
到此這篇關(guān)于詳解CSS布局中浮動(dòng)問題的四種解決方案的文章就介紹到這了,更多相關(guān)CSS布局浮動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS清楚浮動(dòng)clear:both的實(shí)例代碼
本文通過多種方法給大家介紹CSS清楚浮動(dòng)clear:both的實(shí)例代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-11-16
css解決浮動(dòng)導(dǎo)致父元素高度坍塌的幾種方法
這篇文章主要介紹了css解決浮動(dòng)導(dǎo)致父元素高度坍塌的幾種方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來2020-09-04
關(guān)于CSS浮動(dòng)與取消浮動(dòng)的問題
這篇文章主要介紹了關(guān)于CSS浮動(dòng)與取消浮動(dòng)的問題，通過設(shè)置元素脫離正常的文檔流讓元素靠左或向右靠近，通過設(shè)置文字包周圍圖片來解決浮動(dòng)問題，具體解決方法跟隨小編一起2021-06-28
