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

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

1.文档流

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

代码演示

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

2.浮动

浮动：

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

浮动的目的：

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

3.概述浮动float

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

float取值：

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

4.浮动的特点

5.代码演示

1）.特点1234演示

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

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

3、行内元素支持宽高

4、脱离文档流

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style>
  7.             div{
  8.                 width: 100px;
  9.                 height: 200px;
  10.                 background: green;
  11.                 color: #fff;
  12.                 float: left;
  13.             }
  14.             span{
  15.                 background: red;
  16.                 width: 100px;
  17.                 height: 200px;
  18.                 float: right;
  19.             }
  21.             .father{
  22.                 float: none;
  23.                 border: 1px solid blue;
  24.                 margin: 100px;
  25.                 background:none;
  26.                 width: 100%;
  27.                 height: 500px;
  28.             }
  30.             a{
  31.                 float: right;
  32.                 width: 100px;
  33.                 height: 100px;
  34.                 background: yellow;
  35.             }
  36.         </style>
  37.     </head>
  38.     <body>
  39.         <!--
  40.             浮动          float
  41.             定义          使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来
  42.             值           left、right、none
  43.             特征
  44.                         1、块元素可以在一行显示
  45.                         2、按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来
  46.                         3、行内元素支持宽高
  47.                         4、脱离文档流
  48.         -->
  50.         <!--2、按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来    最外层的div.father就是一个父容器-->
  51.         <div class="father">
  52.             <!--1、块元素可以在一行显示-->
  53.             <div>div1</div>
  54.             <div style="background: red;">div2</div>
  56.             <!--3、行内元素支持宽高 a, span标签并没有做类型转变，那它是一个行内标签，是不能设置宽高的，但是这里可以了-->
  57.             <span>span1</span>
  58.             <a href="">a22222</a>
  59.         </div>
  60.         <!--4、脱离文档流  此时所有.father下的所有div，span，a标签都不是按正常的文档流循序排列了，说明脱离了文档流-->
  62.     </body>
  63. </html>

2）.特点56演示

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

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

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

3）.特点7演示

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

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

6.浮动的副作用

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

7.清除浮动

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

一天搞定CSS： 浮动（float）及文档流--10的更多相关文章

  1. CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

    1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  2. 前端基础-CSS如何布局以及文档流

    一. 网页布局方式 二. 标准流 三. 浮动流 四. 定位流 一. 网页布局方式 1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式, 比如word,nodpad ...

  3. css盒子模型、文档流、相对与绝对定位、浮动与清除模型

    一.CSS中的盒子模型 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. h ...

  4. 认识CSS中布局之文档流、浮动、定位以及叠放次序

    前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...

  5. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  6. css排版之-标准文档流

    标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则.HTML文档中的元素可以分为两大类:行内元素和块级元素.       1.行内元素不占据单独的空间,依附于块级元素,行 ...

  7. 1小时搞定vuepress快速制作vue文档/博客+免费部署预览

    先来一下演示效果.和vue的官方文档几乎是一致的,页面内容都可自定义. 此教程部署后的效果预览. 在你跟着教程搭建好项目之后,你会收获: 快速搭建一个文档/博客,后期只需要修改markdown内容和导 ...

  8. CSS的布局之文档流，与行内/块级元素的延伸

    文档流,即(position:stiatic),是html布局机制的默认状态. 文档流在排列的过程中,块级元素从上到下,行内元素,从左到右. ·块级元素 <div> <h系列> ...

  9. css浮动Float

    核心:浮动元素会脱离文档流并向左/向右移动,直到碰到父元素或者另外一个浮动元素. float :left 向左浮动 right 向右浮动 none (默认)     inherit  继承父元素 fl ...

随机推荐

  1. 用NodeJS创建一个聊天服务器

    Node 是专注于创建网络应用的,网络应用就需要许多I/O(输入/输出)操作.让我们用Node实现有多么简单,并且还能轻松扩展. 创建一个TCP服务器 var net = require('net') ...

  2. .NET的JSON格式数据的三种转换方式

    说明: 1..Net进行JSON格式的数据传递的时候,势必用到序列化和反序列化对象,总共有三种方式可是在.NET中实现序列化和反序列化的需求. 2.操作JSON的速度是:Json.net > M ...

  3. iOS APP开发设置启动图片 Launch Image

    一.添加启动图片 点击Assets.xcassets进入图片管理,右击,弹出"New Launch Image"或点下面的+号创建Launch Image: 这里首先说明一下尺寸: ...

  4. hdu1151 Air Raid 二分匹配

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1151 求最小路径覆盖 二分图最小路径覆盖=点的个数-最大匹配. 代码: #include<ios ...

  5. 更快的理解js中循环嵌套

    [循环控制语句] break语句:终止本层循环,继续执行循环后面的语句:(当循环有多层时,break只会跳出一层循环) continue语句:跳过本次循环,继续执行下次循环: (对于for循环,con ...

  6. 基于express+mongodb+pug的博客系统——pug篇

    很久之前就想自己搭一个博客了,最开始用hexo+github,但是换电脑后总是有些麻烦.后来使用WordPress,但是用WordPress总觉得没什么技术含量,前后端都是人家写好的,而且买的垃圾虚拟 ...

  7. redis安装学习

    Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字符串.哈希表.列表.集合.有序集合,位图,hyperloglogs等数据类型.内置复制.Lu ...

  8. 深入理解JAVA序列化

    如果你只知道实现 Serializable 接口的对象,可以序列化为本地文件.那你最好再阅读该篇文章,文章对序列化进行了更深一步的讨论,用实际的例子代码讲述了序列化的高级认识,包括父类序列化的问题.静 ...

  9. Python: import vs from （module) import function(class) 的理解

    Python: Import vs From (module) import function(class) 本文涉及的 Python 基本概念: Module Class import from . ...

  10. Dockerfile 常用指令 - 每天5分钟玩转 Docker 容器技术（16）

    是时候系统学习 Dockerfile 了.下面列出了 Dockerfile 中最常用的指令,完整列表和说明可参看官方文档. FROM指定 base 镜像. MAINTAINER设置镜像的作者,可以是任 ...