float 取值

属性 值 描述
  left 向左浮动
  right 向右浮动
  none 默认值
  inherit 继承

看一个栗子

红色线框代表父元素

脱离文档流，其实也没有完全脱离，会被父元素的边界挡住。

float的元素在同一文档流

看一个栗子:

红线框代表父元素

三个子元素『向左浮动』之后， 父元素就没有内容了，所以父元素没有高度了。

float元素半脱离文档流

对元素，脱离文档流；对内容，在文档流。元素时会重叠，但是内容不会重叠。

举个栗子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>float元素半脱离文档流</title>

    <style type="text/css">

    body{

        width: 300px;padding: 5px;line-height: 1.6;

        border: 1px dashed blue;

    }

    .sample{

        height: 100px;margin-right: 5px;

        padding: 0 5px; line-height: 100px;background-color: pink;

    }

    .sb{

        outline: 1px dashed  red;

    }

    .sample{

        float: left;

    }

    </style>

</head>

<body>

<div class="sample">float : left </div>

<div class="sb">

A float is a box that is shifted to the left or right on the current line .

the most interesting characteristic of a float (o "floated" o "floating" box)

is that content may flow along its side (or be prohibited from doing so by the 'clear'

property).

</div>

</body>

</html>

再举一个栗子:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>float abscure</title>

    <style type="text/css">

    body{

        width: 400px;line-height: 1.6;

    }

    .sample{

        width: 100px;line-height: 100px;

        margin: 3px;text-align: center;

        background-color: pink;

    }

    .sb{

        margin: 10px auto; padding: 5px; border: 1px dashed #0f00fa;

    }

    .sample{

        float: left;

    }

    </style>

</head>

<body>

    <div class="sb">

            <div class="sample">float: left;</div>

        第十二届ChinaJoy 动漫游戏展7月31号在上海新国际博览中心开幕，导出是站台表演的帅哥美女。

    </div>

    <div class="sb">

        有些游戏商为了吸引人气，还请来了著名的演员、模特前来助阵。以下是一批漂亮的Show Girl现场照片。

    </div>

</body>

</html>

通常我们并不想要这个结果，而是粉色div 只被第一个文字块环绕。 需要使用 clear 属性

clear

要理解clear，首先要知道 div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流

属性名 值 描述
clear both 包含left 和 right
  left 左侧不允许其他浮动元素
  right 右侧不允许其他浮动元素
  none 默认值
  inherit  

①应用于后续元素, 来清除浮动对后续的影响。

②应用于块级元素

使用方式：

增加一个空白元素(用得较少)

clearfix，这是一般通用方案。实际上是用一个不可用的点号，来清除浮动。

举个栗子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>float abscure</title>

    <style type="text/css">

    body{

        width: 400px;line-height: 1.6;

    }

    .sample{

        width: 100px;line-height: 100px;

        margin: 3px;text-align: center;

        background-color: pink;

    }

    .sb{

        margin: 10px auto; padding: 5px; border: 1px dashed #0f00fa;

    }

    .sample{

        float: left;

    }

    .clearfix:after{

        content: '.';     /* 在clearfix后面加入一个 . */

        display: block; /* 设置 . 块级元素 */

        clear: both;  /* 清除浮动效果 */

        /*隐藏那个 .  */

        height: 0;

        overflow: hidden;

        visibility: hidden;

    }

/*    .clearfix{

    zoom: 1; 由于在IE 低版本中，不支持after属性，所以需要增加zoom属性

    } */

    </style>

</head>

<body>

    <div class="sb clearfix">

            <div class="sample">float: left;</div>

        第十二届ChinaJoy 动漫游戏展7月31号在上海新国际博览中心开幕，导出是站台表演的帅哥美女。

    </div>

    <div class="sb">

        有些游戏商为了吸引人气，还请来了著名的演员、模特前来助阵。以下是一批漂亮的Show Girl现场照片。

    </div>

</body>

</html>

推荐一篇关于【float 和 clear】的好文章： http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

CSS Float 以及相关布局模式的更多相关文章

  1. CSS float的相关图文详解（二）

    最近这段时间有些忙,一直没有写关于如何清除浮动的,现在终于抽出时间了,还是那句话,如果哪里有错误或者错别字,希望大家留言指正.我们一起进步! 在CSS中,我们通过float属性实现元素的浮动.浮动框旁 ...

  2. CSS float的相关图文详解（一）

    大家好,作为一个刚入门的小前端,第一次写博客,很是鸡冻.由于涉猎较浅,有些知识可能说的不清楚,或者有什么错误,欢迎留言指正.我的第一篇博客写的关于css的浮动的.想必很多小伙伴特别是刚学的,对浮动有一 ...

  3. css float对于之后布局的影响

    后面的元素不浮动,即便设置了宽度,表面上只占了一定的宽度,但实际上占了全屏.(所以设置了overflow之后,并且之后的div设置了宽度,再设置margin-left可能不起作用). 高度对浮动的影响 ...

  4. css布局模式

    css布局模型在网页中,元素有三种布局模型: 流动模型(Flow) 浮动模型 (Float) 层模型(Layer) 流动Flow模型(一): 流动(Flow)是默认的网页布局模式.也就是说网页在默认状 ...

  5. div css float布局用法

    float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...

  6. 文档流 css中间float clear和布局

    文档流 先说说什么是公文流转  什么流 它是一系列连续的东西 <div style="background-color:pink;width:40px;height:80px;&quo ...

  7. 文档流 css中的float clear与布局

    文档流 先说说什么是文档流  流是什么 就是一串连续的东西 <div style="background-color:pink;width:40px;height:80px;" ...

  8. 你不需要基于 CSS Grid 的栅格布局系统

    在过去的几个星期里,我开始看到基于 CSS Grid 的布局框架和栅格系统的出现.我们惊讶它为什么出现的这么晚.但除了使用 CSS Grid 栅格化布局,我至今还没有看到任何框架能提供其他有价值的东西 ...

  9. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

随机推荐

  1. Handler "BlockViewHandler" has a bad module "ManagedPipelineHandler" in its module list

    当你的ASP.NET MVC项跑在IIS时,出现如标题Handler "BlockViewHandler" has a bad module "ManagedPipeli ...

  2. ab网站压力测试

    ab网站压力测试命令的参数.输出结果的中文注解    permalink 以前安装好APACHE总是不知道该如何测试APACHE的性能,现在总算找到一个测试工具了.就是APACHE自带的测试工具AB( ...

  3. C#编程总结（五）多线程带给我们的一些思考

    C#编程总结(五)多线程带给我们的一些思考 如有不妥之处,欢迎批评指正. 1.什么时候使用多线程? 这个问题,对于系统架构师.设计者.程序员,都是首先要面对的一个问题. 在什么时候使用多线程技术? 在 ...

  4. sqlserver 中存储过程的基础知识记录

    1.什么是存储过程? 存储过程就是作为可执行对象存放在数据库中的一个或多个SQL命令. 通俗来讲:存储过程其实就是能完成一定操作的一组SQL语句. 2.为什么要用存储过程? 1)存储过程只在创建时进行 ...

  5. 孙鑫MFC学习笔记6:菜单编程

    1.对菜单响应的顺序: 视类,文档类,框架类,应用程序类 2.消息的分类 3.CWnd继承自CCmdTarget类, 所以从CWnd派生出的类也可以接收WM_COMMAND消息 4.命令的消息路由 5 ...

  6. 疯狂Android讲义 - 学习笔记（二）

    Android应用的用户界面编程 2.1 界面编程与视图(View)组件 Android应用的绝大部分UI组件放在android.widget.android.view包及其子包中,所有UI组件都继承 ...

  7. Android文件的分割和组装

    使用UDP数据包发送文件时,由于UDP数据包大小的限制,一个文件要放在几个UDP数据包里面发送,这就需要把一个文件分割成若干部分,分别放进若干个UDP数据包里面,在接收端,收到这些UDP数据包以后,再 ...

  8. springmvc(1)DispatcherServlet源码简单解析

    springmvc的简单配置 1.首先需要在web.xml中配置DispatcherServlet,这个类是springmvc的核心类,所以的操作都是由这里开始,并且大部分都是在这里面实现的,比如各种 ...

  9. 树链剖分求LCA

    树链剖分中各种数组的作用: siz[]数组,用来保存以x为根的子树节点个数 top[]数组,用来保存当前节点的所在链的顶端节点 son[]数组,用来保存重儿子 dep[]数组,用来保存当前节点的深度 ...

  10. 编译安装rabbitmq服务端

    有一种方式是:下载rabbitmq-server-generic-unix压缩包,是不用编译的.是已经编译好的源码了 下面介绍编译源码安装   总括: 需要以下步骤:   1.安装erlange.因为 ...