天這篇文章我們來(lái)說(shuō)一下css的浮動(dòng)屬性（float），給塊狀元素添加float屬性可以使其轉(zhuǎn)變?yōu)樾袃?nèi)元素，也就是我們所說(shuō)標(biāo)簽對(duì)象浮動(dòng)居左靠左（float:left）和浮動(dòng)居右靠右(float:right)。

（1）float使用語(yǔ)法

css的float主要有3個(gè)屬性值none、left、right，默認(rèn)為none；具體的使用如下所示：

float:none; （不使用浮動(dòng)）

float:left; （靠左浮動(dòng)）

float:right; （靠右浮動(dòng)）

（2）float使用案例

我們通過(guò)案例來(lái)實(shí)際演練一下float元素的使用技巧。

1、float:left的使用練習(xí)

我們這里創(chuàng)建一個(gè)導(dǎo)航條，導(dǎo)航條包含首頁(yè)、關(guān)于我們、新聞中心、案例展示等欄目名稱(chēng)。具體的網(wǎng)頁(yè)代碼以及顯示效果就如下圖所示：

由上圖可以看出默認(rèn)的樣式是豎排顯示的，但是我們常見(jiàn)的網(wǎng)頁(yè)導(dǎo)航條都是橫排顯示的，這時(shí)候我們就可以使用float屬性來(lái)使塊狀元素轉(zhuǎn)變?yōu)樾袃?nèi)元素，并讓居左顯示。

這里我們創(chuàng)建一個(gè)寬度為980px的導(dǎo)航條，給子元素（li）添加float的屬性并對(duì)齊進(jìn)行填充（padding）以及外間距（margin）的潤(rùn)色。具體的網(wǎng)頁(yè)代碼以及顯示效果就如下圖所示：

網(wǎng)頁(yè)中的顯示效果：

2、float:right的使用練習(xí)

float:right顧名思義用于元素靠右對(duì)齊，我們來(lái)看下面的一個(gè)例子，我們隨意寫(xiě)一篇文字，然后文字中插入一張圖片并使圖片右對(duì)齊。

我們?cè)倬W(wǎng)頁(yè)中可以看到圖片已經(jīng)浮動(dòng)到網(wǎng)頁(yè)的右側(cè)中去了。

好了，本篇文章就給大家說(shuō)到這里，大家可以注意看下我們使用float之后會(huì)出現(xiàn)什么問(wèn)題，下邊文章我們會(huì)給大家講解如何清除float帶來(lái)的負(fù)面影響。

每日金句：你不能拼爹的時(shí)候，你就只能去拼命！喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。

SS實(shí)現(xiàn)左邊寬度固定，右邊寬度自適應(yīng)

在初級(jí)的前端面試中，這個(gè)問(wèn)題算是經(jīng)典之一了。當(dāng)然，解決辦法也不止一種。接下來(lái)，小編教童靴們實(shí)現(xiàn)此效果。童靴們也可以在評(píng)論區(qū)分享你們開(kāi)發(fā)中用到的方法。

如果你覺(jué)得無(wú)聊的時(shí)候，那就學(xué)習(xí)吧！

關(guān)注小白前端，持續(xù)收到文章推送。

首先我們先寫(xiě)一下HTML部分：

以上是HTML的結(jié)構(gòu)，下面我們看一下CSS樣式如何定義呢？

左邊元素固定像素并且浮動(dòng)，右邊元素設(shè)置margin-left等于左邊元素的寬度。

我們?cè)跒g覽器中看一下效果：

好多網(wǎng)站都是左側(cè)自適應(yīng)，右側(cè)固定寬度，其實(shí)原理都是一樣的。小編帶大家用另一種方法實(shí)現(xiàn)這種效果吧！

首先，html部分是這樣滴~

css部分：

左側(cè)浮動(dòng)，寬度100%。右側(cè)設(shè)置margin-left負(fù)100%

結(jié)果是這樣滴~

最后，放上小編第一次做自適應(yīng)網(wǎng)站用到的方法：

html:

css:

如上給固定的元素加position，自適應(yīng)的元素加margin-left=固定元素的寬度

最后在啰嗦一句，新來(lái)的童靴去小白前端的主頁(yè)，在菜單中找以前的文章補(bǔ)習(xí)一下哦~

動(dòng)

視覺(jué)格式化模型，大體上將頁(yè)面中盒子的排列分為三種方式：

1. 常規(guī)流

2. 浮動(dòng)

3. 定位

## 應(yīng)用場(chǎng)景

1. 文字環(huán)繞

2. 橫向排列

## 浮動(dòng)的基本特點(diǎn)

修改float屬性值為：

- left：左浮動(dòng)，元素靠上靠左

- right：右浮動(dòng)，元素靠上靠右

默認(rèn)值為none

1. 當(dāng)一個(gè)元素浮動(dòng)后，元素必定為塊盒(更改display屬性為block)

2. 浮動(dòng)元素的包含塊，和常規(guī)流一樣，為父元素的內(nèi)容盒

## 盒子尺寸

1. 寬度為auto時(shí)，適應(yīng)內(nèi)容寬度

2. 高度為auto時(shí)，與常規(guī)流一致，適應(yīng)內(nèi)容的高度

3. margin為auto，為0.

4. 邊框、內(nèi)邊距、百分比設(shè)置與常規(guī)流一樣

## 盒子排列

1. 左浮動(dòng)的盒子靠上靠左排列

2. 右浮動(dòng)的盒子考上靠右排列

3. 浮動(dòng)盒子在包含塊中排列時(shí)，會(huì)避開(kāi)常規(guī)流塊盒

4. 常規(guī)流塊盒在排列時(shí)，無(wú)視浮動(dòng)盒子

5. 行盒在排列時(shí)，會(huì)避開(kāi)浮動(dòng)盒子

6. 外邊距合并不會(huì)發(fā)生

> 如果文字沒(méi)有在行盒中，瀏覽器會(huì)自動(dòng)生成一個(gè)行盒包裹文字，該行盒叫做匿名行盒。

## 高度坍塌

高度坍塌的根源：常規(guī)流盒子的自動(dòng)高度，在計(jì)算時(shí)，不會(huì)考慮浮動(dòng)盒子

清除浮動(dòng)，涉及css屬性：clear

- 默認(rèn)值：none

- left：清除左浮動(dòng)，該元素必須出現(xiàn)在前面所有左浮動(dòng)盒子的下方

- right：清除右浮動(dòng)，該元素必須出現(xiàn)在前面所有右浮動(dòng)盒子的下方

- both：清除左右浮動(dòng)，該元素必須出現(xiàn)在前面所有浮動(dòng)盒子的下方