CSS中的浮動以及清理浮動

  • 時間:2018-09-16 22:56 作者:亦風o 來源:亦風o 閱讀:83
  • 掃一掃,手機訪問
摘要:我們知道css中最重要的就是浮動了,一張網頁結構布局,用的最多的就是浮動了,現在大多數的網站網頁結構都是浮動布局了,不像早些年的表格布局。所以學好浮動對我們的開發很重要。浮動是什么?可能很多人的了解都不一樣,我們來看看w3c對浮動的解釋是什么大多數小伙伴聽得最多的可能就是浮動流,下面我們就來講講什么

我們知道css中最重要的就是浮動了,一張網頁結構布局,用的最多的就是浮動了,現在大多數的網站網頁結構都是浮動布局了,不像早些年的表格布局。所以學好浮動對我們的開發很重要。

浮動是什么?可能很多人的了解都不一樣,我們來看看w3c對浮動的解釋是什么

CSS中的浮動以及清理浮動

大多數小伙伴聽得最多的可能就是浮動流,下面我們就來講講什么是浮動流以及清理浮動。

首先,我們知道,在一張網頁中的正常布局流向(排列方式)都是從左到右,從上到下的方式排列。這個我們稱之為標準文檔流。那什么是浮動流呢?

浮動浮動浮動 ==> 由于有個浮字,我們可以了解為浮起來了一樣。就好比標準文檔流在地下排流,浮動流在天空上排流。簡單看個例子。

CSS中的浮動以及清理浮動

這是兩個正常排列的div,div獨占一行,就不用多說了吧。而后我們給小的方塊加一個浮動

CSS中的浮動以及清理浮動

而后我們再看效果

CSS中的浮動以及清理浮動

而后我們就看到大方塊在小方塊下面,由于小方塊跑天上去了,它就不占據原來的位置,會把那個位置空出來,所以大方塊會竄上去,就看起來兩個方塊重疊了。

在看另外一個例子,子級浮動,父級高度撐不開的問題,這也是浮動帶來的一個不好的影響,平時寫代碼的時候會經常遇到這個。

一個ul標簽,下面兩個li標簽,而后給ul加一個邊框 便于觀看。

CSS中的浮動以及清理浮動

保存運行看下正常效果

CSS中的浮動以及清理浮動

而后我們給li標簽浮動

CSS中的浮動以及清理浮動

效果如下

CSS中的浮動以及清理浮動

這下我們看到ul的高度沒有了,上下邊框緊緊挨著,這就是剛剛上面說的浮起來的狀況,由于子級li標簽浮動起來了,它不占據原來的位置,它已經在天上了,所以它的父級ul標簽包不住它,撐不起來高度,才會產生這種狀況。

那我們要怎樣處理這種現象呢。就是清理浮動。

大致分為4種方案:

1、在并列的子元素,最后加一個元素,給他加clear:both

2、給父子加一個class: clearfix

.clearfix::after{

content: '';

clear: both;

display: block;

}

3、讓父級觸發BFC效果

position:absolute

display:inline-block

float:left|right

overflow:hidden

4、如何浮動的父級本身就是浮動元素嗎,那么不用清理浮動了

咱們就來給父級觸發BFC效果看一下。

CSS中的浮動以及清理浮動

看效果

CSS中的浮動以及清理浮動

現在父級就把子級包裹住了,高度也有了。

有什么問題可以點一下關注,私信小編。

  • 全部評論(0)
最新發布的資訊信息
【系統環境|】淘碼庫,據消息稱已被調查。淘碼庫源碼網,已經無法訪問!(2020-01-14 04:13)
【系統環境|服務器應用】Discuz隱藏后臺admin.php網址修改路徑(2019-12-16 16:48)
【系統環境|服務器應用】2020新網站如何讓百度快速收錄網站首頁最新方法,親測有用!免費(2019-12-16 16:46)
【系統環境|服務器應用】Discuz發布帖子時默認顯示第一個主題分類的修改方法(2019-12-09 00:13)
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
【系統環境|軟件環境】Linux 入門時必學60個文件解決命令(2019-12-04 14:26)
【系統環境|軟件環境】更新版ThreeJS 3D粒子波浪動畫(2019-12-04 14:26)
手機二維碼手機訪問領取大禮包
返回頂部
3d开机号查询