整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天這篇文章我們來說一下css的浮動屬性（float），給塊狀元素添加float屬性可以使其轉變為行內元素，也就是我們所說標簽對象浮動居左靠左（float:left）和浮動居右靠右(float:right)。
css的float主要有3個屬性值none、left、right，默認為none；具體的使用如下所示：
float:none; （不使用浮動）
float:left; （靠左浮動）
float:right; （靠右浮動）
我們通過案例來實際演練一下float元素的使用技巧。
1、float:left的使用練習
我們這里創建一個導航條，導航條包含首頁、關于我們、新聞中心、案例展示等欄目名稱。具體的網頁代碼以及顯示效果就如下圖所示：
由上圖可以看出默認的樣式是豎排顯示的，但是我們常見的網頁導航條都是橫排顯示的，這時候我們就可以使用float屬性來使塊狀元素轉變為行內元素，并讓居左顯示。
這里我們創建一個寬度為980px的導航條，給子元素（li）添加float的屬性并對齊進行填充（padding）以及外間距（margin）的潤色。具體的網頁代碼以及顯示效果就如下圖所示：
網頁中的顯示效果：
2、float:right的使用練習
float:right顧名思義用于元素靠右對齊，我們來看下面的一個例子，我們隨意寫一篇文字，然后文字中插入一張圖片并使圖片右對齊。
我們再網頁中可以看到圖片已經浮動到網頁的右側中去了。
好了，本篇文章就給大家說到這里，大家可以注意看下我們使用float之后會出現什么問題，下邊文章我們會給大家講解如何清除float帶來的負面影響。
每日金句：你不能拼爹的時候，你就只能去拼命！喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
在初級的前端面試中，這個問題算是經典之一了。當然，解決辦法也不止一種。接下來，小編教童靴們實現此效果。童靴們也可以在評論區分享你們開發中用到的方法。
如果你覺得無聊的時候，那就學習吧！
關注小白前端，持續收到文章推送。
首先我們先寫一下HTML部分：
以上是HTML的結構，下面我們看一下CSS樣式如何定義呢？
左邊元素固定像素并且浮動，右邊元素設置margin-left等于左邊元素的寬度。
我們在瀏覽器中看一下效果：
好多網站都是左側自適應，右側固定寬度，其實原理都是一樣的。小編帶大家用另一種方法實現這種效果吧！
首先，html部分是這樣滴~
css部分：
左側浮動，寬度100%。右側設置margin-left負100%
結果是這樣滴~
最后，放上小編第一次做自適應網站用到的方法：
html:
css:
如上給固定的元素加position，自適應的元素加margin-left=固定元素的寬度
最后在啰嗦一句，新來的童靴去小白前端的主頁，在菜單中找以前的文章補習一下哦~
視覺格式化模型，大體上將頁面中盒子的排列分為三種方式：
1. 常規流
2. 浮動
3. 定位
1. 文字環繞
字體環繞
2. 橫向排列
修改float屬性值為：
- left：左浮動，元素靠上靠左
- right：右浮動，元素靠上靠右
默認值為none
1. 當一個元素浮動后，元素必定為塊盒(更改display屬性為block)
2. 浮動元素的包含塊，和常規流一樣，為父元素的內容盒
1. 寬度為auto時，適應內容寬度
2. 高度為auto時，與常規流一致，適應內容的高度
3. margin為auto，為0.
4. 邊框、內邊距、百分比設置與常規流一樣
1. 左浮動的盒子靠上靠左排列
2. 右浮動的盒子考上靠右排列
3. 浮動盒子在包含塊中排列時，會避開常規流塊盒
4. 常規流塊盒在排列時，無視浮動盒子
5. 行盒在排列時，會避開浮動盒子
6. 外邊距合并不會發生
> 如果文字沒有在行盒中，瀏覽器會自動生成一個行盒包裹文字，該行盒叫做匿名行盒。
高度坍塌的根源：常規流盒子的自動高度，在計算時，不會考慮浮動盒子
清除浮動，涉及css屬性：clear
- 默認值：none
- left：清除左浮動，該元素必須出現在前面所有左浮動盒子的下方
- right：清除右浮動，該元素必須出現在前面所有右浮動盒子的下方
- both：清除左右浮動，該元素必須出現在前面所有浮動盒子的下方
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
