溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文將為大家詳細介紹“CSS布局中浮動問題怎么解決”，內容步驟清晰詳細，細節處理妥當，而小編每天都會更新不同的知識點，希望這篇“CSS布局中浮動問題怎么解決”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內容如下，一起去收獲新知識吧。
一、起因：
子盒子設置浮動之后效果：
由此可見，藍色的盒子設置浮動之后，因為脫離了標準文檔流，它撐不起父盒子的高度，導致父盒子 高度塌陷 。如果網頁中出現了這種問題，會導致我們整個網頁的布局紊亂
二、解決方案：
父盒子設置固定高度------------------給父元素添加固定的高度
內墻法 -------------------------------在父元素的后面添加一個空的div添加樣式為 clear:both
偽元素清除法-------------------------給父元素類名添加一個類叫 clearfix （推薦）
overflow:hidden---------------------給父元素樣式添加 overflow:hidden
（1）父盒子設置固定高度
雖然，給父盒子設置了固定高度能暫時解決我們的問題，但是它的使用不靈活，如果未來子盒子的高度需求發生了改變(網頁的多處地方)，那么我們得手動需要更改父盒子的高度。后期不易維護。
應用：網頁中盒子固定高度區域，比如固定的導航欄。
缺點：使用不靈活，后期不易維護
（2）內墻法
在浮動元素的后面加一個空的 塊級元素 (通常是div),并且該元素設置 clear:both； 屬性。clear屬性，字面意思就是清除，那么both,就是清除浮動元素對我左右兩邊的影響。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮動元素的破壞性</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>應用：網頁中應用不多，只是為了引導下一個清除浮動的方式。
缺點：結構冗余
（3）偽元素清除法
內墻法是在浮動元素的后面加一個空的 塊級元素 (通常是div),并且該元素設置 clear:both； 屬性。
那么正好在css3的屬性用法中整好有個選擇器也完全符合這個用法，偽元素選擇器。它就像偽類一樣，讓偽元素添加了選擇器，但不是描述特殊的狀態，允許為元素的 某些部分設置樣式 。
表示在p標簽元素的最后面添加樣式，同時這也正好符合內墻法的用法。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮動元素的破壞性</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>當以后需要清除浮動時只需要在標簽中再添加一個 “clearfix” 類就行，十分的方便快捷 ！
編寫的偽元素清除法內容解釋：
.clearfix:after{
content:''; 表示給.clearfix元素內部最后添加一個內容，該內容為行內元素。
display: block; 設置該元素為塊級元素，符合內墻法的需求。（有的地方使用table，因為table也是一個塊級元素）
clear: both; 清除浮動的方法。必須要寫
overflow: hidden; 如果用display:none;,那么就不能滿足該元素是塊級元素了。overflow:hidden;表示隱藏元素，但是該元素占位置；而display:none;不占位置。
height: 0;
}此處梳理一下：after（偽類）和：：after（偽元素）的區別
相同點
都可以用來表示偽類對象，用來設置對象前的內容
:before和::before寫法是等效的; :after和::after寫法是等效的，版本不同而已
不同點
:before/:after是Css2的寫法，::before/::after是Css3的寫法
:before/:after 的兼容性要比::before/::after好 ，
不過在H5開發中建議使用::before/::after比較好
注意
這些偽元素 要配合content屬性一起使用
這些偽元素 不會出現在DOM中，所以不能通過js來操作，僅僅是在 CSS 渲染層加入
這些偽元素 的特效通常要使用:hover偽類樣式來激活
（4）overflow:hidden
CSS屬性overflow定義一個元素的內容太大而無法適應盒子的時候該做什么。它是overflow-x和overflow-y的簡寫屬性
overflow屬性不僅僅能實現以上效果，那么當一個元素設置了overflow:hidden|auto|scroll屬性之后，它會形成一個BFC區域，我們叫做它為 塊級格式化上下文 。
BFC只是一個規則。它對浮動定位都很重要。浮動定位和清除浮動只會應用于同一個BFC的元素。
浮動不會影響其它BFC中元素的布局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。
優點：代碼簡潔
缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢出的元素
總結：只要我們讓父盒子形成BFC的區域，那么它就會自動清除區域中浮動元素帶來的影響 。
哪些會形成BFC區域：
如果你能讀到這里，小編希望你對“CSS布局中浮動問題怎么解決”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內容的文章，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
