浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局；恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。

下面我们就来详细说明浮动！！！！！！！！

1.文档流

在浮动中有一个文档流的概念，所以在这里不得不介绍一下文档流了。

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--文档流文档中可显示的元素在排列时候的开始位置以及他们所占的区域因为页面中的元素分为不同的种类，所以他们会按各自的特点去显示，在页面中所占的区域不是一样的。会按从上到下，从左到右的顺序输出内容--><!--<span style="background: red;">kaivon</span><span style="background: red;">kaivon2</span>--><!--<span style="background: red;">kaivon</span><div style="width: 100px;height: 100px; background: red;">kaivon2</div>--><!--<span style="background: red;">kaivon</span><div style="width: 100px;height: 100px; background: red; display: inline-block;">kaivon2</div>--><div style="width: 100px;height: 100px; background: red; ">kaivon1</div><div style="width: 100px;height: 100px; background: green;">kaivon2</div></body>
</html>

2.浮动

浮动：

使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来

浮动的目的：

为了达到自己的布局目的，让指定元素定位在指定位置，我们就需要用到浮动。

3.概述浮动float

通过控制属性float来，控制元素的位置

float取值：

1）left：向左浮动2）right：向右浮动3）none：没有浮动，默认值

4.浮动的特点

5.代码演示

1）.特点1234演示

1、块元素可以在一行显示

2、按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来

3、行内元素支持宽高

4、脱离文档流

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div{width: 100px;height: 200px;background: green;color: #fff;float: left;}span{background: red;width: 100px;height: 200px;float: right;}.father{float: none;border: 1px solid blue;margin: 100px;background:none;width: 100%;height: 500px;}a{float: right;width: 100px;height: 100px;background: yellow;}</style></head><body><!--浮动          float定义          使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来值           left、right、none特征1、块元素可以在一行显示2、按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来3、行内元素支持宽高4、脱离文档流--><!--2、按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来    最外层的div.father就是一个父容器--><div class="father"><!--1、块元素可以在一行显示--><div>div1</div><div style="background: red;">div2</div><!--3、行内元素支持宽高 a, span标签并没有做类型转变，那它是一个行内标签，是不能设置宽高的，但是这里可以了--><span>span1</span><a href="">a22222</a></div><!--4、脱离文档流  此时所有.father下的所有div，span，a标签都不是按正常的文档流循序排列了，说明脱离了文档流--></body>
</html>

2）.特点56演示

5、块元素默认宽度会被改变（包裹性）

6、父级高度塌陷（破坏性）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.parent{border: 1px solid #f00;}.box{width: 100px;height: 200px;background: green;color: #fff;float: left;}.width{height: 50px;border: 5px solid #0000FF;float: left;}</style></head><body><!--浮动          float定义          使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来值           left、right、none特征1、块元素可以在一行显示2、按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来3、行内元素支持宽高4、脱离文档流浮动后跟的元素（没有浮动）的位置是从前面浮动元素的位置开始的注意：非浮动元素里的内容会留出前面浮动元素的位置(盒模型的位置)5、块元素默认宽度会被改变（包裹性）块元素不设置宽度，那宽度会自动变成内容所撑开的宽度6、父级高度塌陷（破坏性）子元素有浮云后，那父级元素的高度不会自动撑开了--><!--5、块元素默认宽度会被改变（包裹性）  正常情况下div会默认占据一行，浮动后宽高就由内容撑开--><div class="width">alibaba</div><!--6、父级高度塌陷（破坏性）--><div class="parent"><div class="box">box</div></div></body>
</html>

3）.特点7演示

7、换行不会被解析成空格

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.parent{border: 1px solid #f00;}.box{width: 100px;height: 200px;background: green;color: #fff;float: left;}</style></head><body><!--浮动          float定义          使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来值           left、right、none特征1、块元素可以在一行显示2、按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来3、行内元素支持宽高4、脱离文档流浮动后跟的元素（没有浮动）的位置是从前面浮动元素的位置开始的注意：非浮动元素里的内容会留出前面浮动元素的位置(盒模型的位置)5、块元素默认宽度会被改变（包裹性）块元素不设置宽度，那宽度会自动变成内容所撑开的宽度6、父级高度塌陷（破坏性）子元素有浮云后，那父级元素的高度不会自动撑开了7、换行不会被解析成空格浮云后的元素就会脱离文档流了，那它就不属于文档流里的结构了，所以换行、空格都跟父级没关系了--><!--7、换行不会被解析成空格--><div class="parent"><div class="box">box</div><div class="box">box</div><div class="box">box</div></div></body>
</html>

6.浮动的副作用

地址：http://blog.csdn.net/baidu_37107022/article/details/71554283

7.清除浮动

地址：http://blog.csdn.net/baidu_37107022/article/details/71557806

一天搞定CSS：浮动（float）及文档流--10相关推荐

css三种定位都脱离文档流了吗,CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别...
1.代码 (1)示例代码1 CSS布局之脱离文档流详解--浮动.绝对定位脱离文档流的区别 .left { width: 300px; height: 500px; background: red; f ...
前端基础-CSS如何布局以及文档流，对于新手来说，特别有用
一. 网页布局方式 1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式比如word,nodpad++等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的 ...
BFC机制与浮动定位脱离文档流
BFC机制与浮动定位脱离文档流 BFC块格式化上下文 --w3c规定的一种独立渲染区域渲染流程基本上四个步骤: 1.计算CSS样式 2.构建Render Tree 3.Layout – 定位.大小, ...
[css] 什么是脱离文档流？有什么办法可以让元素脱离标准的文档流？
[css] 什么是脱离文档流?有什么办法可以让元素脱离标准的文档流? 文档流就是指元素在 HTML 文档中位置顺序决定排布的过程.HTML 元素有块级元素和行内元素,块级元素一个占一行,行内元素在一行 ...
css盒子模型、文档流、相对与绝对定位、浮动与清除模型
一.CSS中的盒子模型标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. h ...
CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
准确的说,float浮动属于半脱离文档流,1.float浮动跟position:absolute一样拥有脱离文档流的功能,但是float虽然脱离了文档流但是仍然会占据位置,其他的文本内容会按照顺序继续 ...
css样式脱离标准文档流
标准文档流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式.并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素. 元素脱离标注文档流之后,将不再在标准流中占据空间, ...
(前端)html与css css 15、标准文档流
标准文档流常用的Word文档就是一个经典的标准文档流,内容必须是从上往下,从左往右书写的,有一个光标控制,前面的大小或者内容发生变化,后面的内容会跟着发生一些位置变化. 制作的html网页就是一个标 ...
CSS之布局（文档流）
文档流: <!DOCTYPE html> <html><head><meta charset="utf-8" /><title ...

一天搞定CSS：浮动（float）及文档流--10

1.文档流

2.浮动

3.概述浮动float

4.浮动的特点

5.代码演示

6.浮动的副作用

7.清除浮动

一天搞定CSS：浮动（float）及文档流--10相关推荐

最新文章

热门文章

一天搞定CSS： 浮动（float）及文档流--10

1.文档流

2.浮动

3.概述浮动float

4.浮动的特点

5.代码演示

6.浮动的副作用

7.清除浮动

一天搞定CSS： 浮动（float）及文档流--10相关推荐

最新文章

热门文章

一天搞定CSS：浮动（float）及文档流--10

一天搞定CSS：浮动（float）及文档流--10相关推荐