整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天这篇文章我们来说一下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小时内与您取得联系。
