當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS之浮动模型

發布時間：2023/12/10 CSS 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS之浮动模型小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

浮動模型又叫流模型，什么是float（浮動）

最早是為了適應報紙的排版，文字環繞圖片的效果，后來經過使用和研究發展出一系列復雜的用法。

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。

一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動流

為了說明什么是浮動流，我們先用代碼看一下效果

<div class="demo1"></div> <div class="demo2"></div> ----------------------------------------------------------------- .demo1 {float: left;width: 100px;height: 100px;background-color: green; }.demo2 {width: 150px;height: 150px;background-color: gray;opacity: 0.5; }

效果：demo1這個div設置了一個向左浮動，我們會看到demo2覆蓋了demo1

問題：這是不是說明浮動元素也脫離了原來的層級呢？

其實并不是，這是因為浮動元素產生了浮動流，所有產生了浮動流的元素，塊級元素是看不到他們的（也就是說，塊級元會認為浮動元素所占的位置是沒有東西的，就會自動覆蓋上去）。

問題注解：
BFC化的元素和文本類屬性的元素（帶有inline的元素）

以及文本可以看到浮動元素。

但是，沒有BFC化的塊級元素看不到浮動元素。

也就是說產生浮動的元素對不同的其他元素的影響不同。

什么是BFC？

塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。

BFC(Block Formatting Context)：塊級格式化上下文。
BFC決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。當設計到可視化布局的時候，BFC提供了一個環境，HTML元素在這個環境中按照一定的規則進行布局。一個環境中的元素不會影響到其他環境中的布局。

BFC的原理（渲染規則）

BFC元素垂直方向的邊距會發生重疊。屬于不同BFC外邊距不會發生重疊

BFC的區域不會與浮動元素的布局重疊。

BFC元素是一個獨立的容器，外面的元素不會影響里面的元素。里面的元素也不會影響外面的元素。

計算BFC高度的時候，浮動元素也會參與計算(清除浮動)

如何創建BFC

overflow不為visible;

float的值不為none；

position的值不為static或relative；

display屬性為inline-blocks,table,table-cell,table-caption,flex,inline-flex;

例如：

?poosition:absolute;
?display:inline-block;
float:left/right;
?overflow:hidden;

看一個例子，假設我們有這樣一個需求，父元素是一個自適應高度的div，需要把帶有浮動屬性的子元素填充到這個父元素中

<body><div class="box"><div class="content">1</div><div class="content">2</div><div class="content">3</div></div> </body> ---------------------------------------------------------------- * {margin: 0;padding: 0; }.box {border: 1px solid black; }.content {float: left;height: 100px;width: 100px;background-color: gray; }

這是因為子元素是浮動元素，父元素是塊級元素，塊元素看不到浮動元素，但是行內元素可以看到。

解決方案有兩種：

第一種解決方式，但是這種方式不推薦，因為會改變文檔的結構。???

在浮動元素的同級dom下添加一個行內元素標簽，比如p標簽，再給它添加一個css樣式clean：both（清除所有浮動流），這樣p標簽左右的浮動就被清除了，父級元素就被撐開了。

<div class="box"><div class="content">1</div><div class="content">2</div><div class="content">3</div><p class="clean"></p> </div> ------------------------------------------------------------ .clean {clear: both; }

第二種解決方式，推薦

使用偽元素來清除浮動
關于偽元素可以參考這里偽元素
開發中應使用這種方式。

<div class="box"><div class="content">1</div><div class="content">2</div><div class="content">3</div> </div> -------------------------------------------------------------------- /*使用偽元素來清除邏輯上最后的浮動*/ .box::after {/*偽元素必須設置content屬性*/content: "";/*clear屬性只對塊級元素生效,所以要把偽元素設置成塊級元素*/display: block;clear: both; }

清除浮動后的效果如下：