清除浮動的原理和方法
2022-04-16 分類： 網(wǎng)站建設
問題的由來：
在CSS規(guī)范中，浮動定位是脫離元素正常流的。所以，只要含有浮動元素的父容器，在顯示時不考慮子元素的位置，就當它們不存在一樣。這就造成了顯示出來，父容器好像空容器一樣。
比如下面代碼：
1
2
3
4
在瀏覽器中一運行，實際視圖是子元素顯示在父容器的外部。
解決方法一：添加空元素
在浮動元素下面添加一個非浮動的元素
代碼如下：
復制代碼
1
2
3
4
5
6
7
復制代碼
解決方法二：浮動的父容器
將父容器也改成浮動定位，這樣它就可以帶著子元素一起浮動了
代碼如下：
復制代碼
1
2
3
4
5
6
復制代碼
解決方法三：浮動元素的自動clearing
讓父容器變得可以自動"清理"（clearing）子元素的浮動，從而能夠識別出浮動子元素的位置，不會出現(xiàn)顯示上的差錯。
代碼如下：
復制代碼
1
2
3
4
5
6
復制代碼
解決方法四：通過CSS語句添加子元素，這樣就不用修改HTML代碼
就是用after偽元素的方法在容器尾部自動創(chuàng)建一個元素的方法
代碼如下：
復制代碼
1
2
3
4
5
6
本文名稱：清除浮動的原理和方法
URL分享：http://www.aaarwkj.com/news/145739.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、定制開發(fā)、域名注冊、Google、關鍵詞優(yōu)化、外貿(mào)網(wǎng)站建設
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 【網(wǎng)絡推廣】傳統(tǒng)線下實體企業(yè)做網(wǎng)絡推廣營銷有用嗎? 2022-04-16
- 為什么說蘇州開發(fā)網(wǎng)站是企業(yè)的標配？ 2022-04-16
- 【網(wǎng)站優(yōu)化】如何創(chuàng)造一個適合被百度搜索引擎秒收網(wǎng)站內(nèi)容環(huán)境? 2022-04-16
- 網(wǎng)頁設計對于圖片的運用有哪些特殊要求？ 2022-04-16
- 【SEO優(yōu)化】網(wǎng)站SEO優(yōu)化的站內(nèi)如何布局鏈接? 2022-04-16
- 修改網(wǎng)站標題且不被降權的四個知識點 2022-04-16
- 如何挑選一家靠譜的南陽網(wǎng)站建設服務商 2022-04-15
- 網(wǎng)頁圖文設計帶有獨特的互聯(lián)網(wǎng)屬性在 2022-04-15
- 創(chuàng)新互聯(lián)技術分享：如何查看網(wǎng)站是否被掛木馬？ 2022-04-16
- 差異:用差異化打造品牌 2022-04-16
- 【網(wǎng)站優(yōu)化】關于網(wǎng)絡推廣的三問三答 2022-04-16
- 集團網(wǎng)站運營三寶：SEO優(yōu)化、有效收錄、競價廣告 2022-04-16
- 網(wǎng)站運營管理工作的基本保障有哪些？ 2022-04-16
- 【SEO優(yōu)化】網(wǎng)站欄目的設計方向主要包括哪些方面? 2022-04-15
- 管莊app開發(fā)公司 2022-04-15
- 企業(yè)網(wǎng)站運營推廣十大方向 2022-04-15
- 東營seo優(yōu)化：網(wǎng)站優(yōu)化推廣排名需要注意什么？ 2022-04-15
- 互聯(lián)網(wǎng)時代制作網(wǎng)站要求 2022-04-15
- 做新網(wǎng)站優(yōu)化時，需要注意哪些要點? 2022-04-15