整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天這篇文章我們來說一下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帶來的負面影響。
每日金句：你不能拼爹的時候，你就只能去拼命！喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
關注此頭條號“互聯網IT信息”——>私信發送 “天貓css” ，（注意：css全是小寫）即可得到源代碼的獲取方式。
案例和由此案例重點講解的知識點介紹
案例代碼實現
css規避脫標流知識點詳解
此案例是頁面，效果如下：
此頁面的技術實現解析：
通過使用margin: auto屬性，規避脫標流造成的頁面錯亂
此案例中主要用到了，基于此，我們會系統的將如下知識點全部講解：
margin
vertical-align
第一步：編寫廣告橫欄的html代碼
第二步：使用margin屬性，使div元素規避脫標流
概念：
規避脫標流的概念：由于浮動，定位都脫離了標準流，會對網頁布局造成一定的影響。
而目前出現脫標流的情況：在標準流之外使用了浮動和定位。
規避脫標流的方法是：使用margin，具體見下。
規避脫標流之使用margin-left:auto規避
margin-left:auto 讓盒子左側充滿
margin-right:auto 讓盒子右側充滿
margin:0 auto 居中對齊的由來
規避脫標流之讓圖片和文字垂直對齊
使用 vertical-align:middle 讓行內，行內塊元素設置垂直距離
vertical-align:middle 常與 display:inline-block 配合使用， 表格對此屬性最敏感
vertical-align規避脫標流的案例：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<style type="text/css">
#div1{width: 300px;height: 300px;border: 1px solid red;display: table;}
p{vertical-align: middle; display: table-cell;text-align: center;}
</style>
</head>
<body>
<div id="div1">
<p>好漂亮的方塊</p>
</div>
</body>
</html>
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
文檔流
是瀏覽器解析網頁的一個重要概念。對于一個XHTML網頁，body元素下的任意元素，根據其先后順序，組成了一個上下關系，這便是文檔流。瀏覽器根據這些元素的順序去顯示它們在網頁中的位置。文檔流是瀏覽器的默認顯示規則。
Float
1）浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
2）由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
請看下圖，當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：
例1：
例2：
再請看下圖，當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
例3：
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。
例4：
如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：
例5：
浮動元素會生成一個塊級元素，而不論它本身是何種元素。
代碼：
<head>
<style type="text/css">
span{ float:left; width:100px; height:100px; background-color: #FFCCCC}
</style>
</head>
<body>
<span>內聯元素浮動會變成塊</span>
</body>
效果：
解釋：內聯元素無法設置寬高，但是加了float后便可以，說明浮動的元素都是塊。
· 如果未給浮動元素設置寬度，那么其寬度為內容寬度。
代碼：
<head>
<style type="text/css">
div{ float:left;background-color: #FFCCCC}
</style>
</head>
<body>
<div>浮動元素的默認寬度看內容</div>
</body>
效果：
解釋：div是個塊級元素，默認寬度為父級容器的100%，但是加上浮動后，寬度變的符合內容，可見，浮動的元素，如果不設置寬度，那么它會根據內容自適應寬度。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
