溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了怎么在CSS中使用偽元素清除浮動，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
1.行內(nèi)樣式，最直接最簡單的一種，直接對HTML標簽使用style=""。2.內(nèi)嵌樣式，就是將CSS代碼寫在之間，并且用
進行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實用的樣式，只需要在之間加上
BFC概念：
塊級格式化上下文，是一個獨立的渲染區(qū)域，讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離，使內(nèi)外元素的定位不會相互影響。
我們先了解一個名詞：BFC（block formatting context），中文為“塊級格式化上下文”。
先記住一個原則： 如果一個元素具有BFC,那么內(nèi)部元素再怎么翻江倒海，翻云覆雨，都不會影響外面的元素。所以，BFC元素是不可能發(fā)生margin重疊的，因為margin重疊會影響外面的元素的；BFC元素也可以用來清除浮動帶來的影響，因為如果不清除，子元素浮動則會造成父元素高度塌陷，必然會影響后面元素的布局和定位，這顯然有違BFC元素的子元素不會影響外部元素的設(shè)定。
以下情況會觸發(fā)BFC:
•<html>根元素
•float的值不為none
•overflow的值為auto，scroll，hidden
•display的值為table-cell，table-caption和inline--block中的任何一個
•position的值不為relative和static 即 position: absolute/fixed
顯然我們在設(shè)置overflow值為hidden時使container元素具有BFC，那么子元素child浮動便不會帶來父元素的高度坍塌影響。
利用偽類元素清除浮動：
.clearFix::after,.clearFix::before {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.clearFix { zoom: 1;}上述內(nèi)容就是怎么在CSS中使用偽元素清除浮動，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼