先上一个简单示例，了解一下float的使用

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>fl0at</title>

<style type="text/css">

#Content{

    height:600px;

    margin-top:20px;

    background:#90C;

}

</style>

</head>

<body>

    <div id="Content">

        <div style="float:left;height:400px; background:#f00;">Content-Left</div>

        <div style="           height:400px; background:#fff;">Content-Main</div>

        <div style="clear:both;"></div>

        <div style="float:left;height: 50px; background-color: red;">左浮动</div>

        <div style="           height:50px;  background-color: blue;">">右浮动</div>

    </div>

</body>

</html>

在Content-Main 和右浮动对应div里加上float:left或者给他们设置width如图：

float 属性的本质理解

float 出现的根本意义只是用来让文字环绕图片而已。而我们目前用 float 实现页面布局本不是 float 该干的事情。

float 属性（无论是左浮动还是右浮动）某种意义上而言与 display:inline-block 属性的作用是一模一样的，所以类似于 display:block; float:left; 的CSS代码超过95%的情况是没有道理的( display:block 是多余的)。然而，float无法等同于 display:inline-block，其中原因之一就是浮动的方向性，display:inline-block 仅仅一个水平排列方向，就是从左往右，而float可以从右往左排列，这就是两者的差异。然而，我们又有多少情况需要元素从右往左排列呢？很少。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>fl0at</title>

<style type="text/css">

#Content{

    height:600px;

    margin-top:20px;

    background:#90C;

}

</style>

</head>

<body>

    <div id="Content">

        <div style="display:inline-block ;height:400px; background:#f00;">Content-Left</div>

        <div style="display:inline-block ;height:400px; background:#fff;">Content-Main</div>

        <div style="display:inline-block ;margin-right:0px;padding-right:0px;height: 50px; background-color: red;">左浮动</div>

        <div style="display:inline-block ;margin-left:0px;padding-left:0px;height:50px;background-color: blue;">">右浮动</div>

    </div>

</body>

</html>

 float 实现页面布局

浮动可以实现一行多列。

对一个元素声明clear:both，会将来自元素周围的的浮动清除，举一个简单的例子就是当先声明一个元素向左浮动时，那么这个元素的右边就会留出一部分空白，如果这个时候空间可以容下该元素的下一个元素的大小，那么由于此元素声明过浮动向左，那么下一个元素就会自动弥补留下的空间。那么相对这个补缺的元素（本身没有声明浮动），它有一个来自他左方的浮动，如果这个时候对这个补缺的元素声明clear: both;那么它就会忽略上一个元素的浮动声明而不去补之前的空缺。对#div1和#div2都声明了浮动向左，这个时候#div1之前是没有其他浮动元素的，clear：both并不会对之后的#div2产生影响，而相对#div2，由于它之前的#div1声明向左浮动，也就给#div2留出了一部分空间，那么由于#div1声明的向左浮动，#div2默认会自动补全，这个时候再对#div2声明clear:both就会起作用，它就跑到下面去了。若限制了parent元素的宽为100pixel,即使#div1向左浮动，也没有空间给#div2补全了，所以#div2只能跑下面去。

float详解的更多相关文章

  1. CSS浮动属性Float详解

    什么是CSS Float? float 是 css 的定位属性.在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在 ...

  2. CSS布局(四) float详解

    一.float设计初衷 因为float被设计出来的初衷是用于--文字环绕效果.即,一个图片一段文字,图片float:left之后,文字会环绕图片. <div style="width: ...

  3. [七]基础数据类型之Float详解

        Float 基本数据类型float  的包装类 Float 类型的对象包含一个 float 类型的字段    属性简介 用来以二进制补码形式表示 float 值的比特位数 public sta ...

  4. 盒模型、position、float详解css重点汇总

    元素类型 HTML 的元素可以分为两种: 块级元素(block level element) 内联元素(inline element 有的人也叫它行内元素) 两者的区别在于以下三点: 块级元素会独占一 ...

  5. CSS float详解

    前言:在我们写CSS样式的时候,float,position,display,overflow这几个关键字用得比较多. 弄清楚他们之间的原理,我们可以更高效的写出我们想要的布局. 作者:Ry-yuan ...

  6. css浮动(float)详解

    一.什么是浮动? 浮动,顾名思义,就是漂浮的意思.指的是一个元素脱离文档流,悬浮在父元素之上的现象. 二.如何产生浮动? 给元素本身添加float属性 float值: left 元素向左浮动. rig ...

  7. css浮动float详解

    https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

  8. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  9. 超详细：CSS-float详解

    Float 详解 本文摘自:http://www.cnblogs.com/yuanchenqi/articles/5615774.html 首先要知道,div是块级元素,在页面中独占一行,自上而下排列 ...

随机推荐

  1. oracle表结构表数据导入导出

    --------------------------------------imp/exp------------------------------------------------------- ...

  2. Java-JVM 类加载机制

    类的生命周期中的第一步,就是要被 JVM 加载进内存,类加载器就是来干这件事. 一.类加载器种类 系统提供了 3 种类加载器: 1.启动类加载器(Bootstrap ClassLoader) 由 C ...

  3. import 和 require 的 区别

    node编程中最重要的思想就是模块化,import和require都是被模块化所使用. 遵循规范 require 是 AMD规范引入方式 import是es6的一个语法标准,如果要兼容浏览器的话必须转 ...

  4. C++中 关于操作符的重载

    C++实现了类的定义,也可以对类之间的操作符进行定义,又叫重载. 例如同类之间的 加.减法,赋值等等操作. 具体看http://blog.csdn.net/zhy_cheng/article/deta ...

  5. Mysql：常用操作（导入数据，用户授权，远程连接授权，设置通信缓冲区的最大长度）

    1.导入数据命令: mysql --host=localhost --port=3306 --user=root --password=hnsjt_lwsj@2018 szyszx_20180515- ...

  6. C# 线程thread

    一.问题总结 1. 在WinForm开发过程中用到线程时,往往需要在线程中访问线程外的控件,比如:设置textbox的Text值等等.如果直接访问UI控件会报出“从不是创建控件的线程访问它”错误.控件 ...

  7. Datafactory 学习笔记

    1)插入汉字出现乱码的情况 select userenv('language') from dual: select * from V$NLS_PARAMETERS: 把下面变量名和变量值配置到系统环 ...

  8. HNU_团队项目_数据库设计感想_个人感想

    数据库设计感想  个人的一点心得体会 最重要的放在最前面——讨论开会时的123经验 开会前对会议目的及方式要有所考虑: 不要随意无目的开会: 遵守时间,控制会议时间长度: 会议主持人要维持会议只需,有 ...

  9. python3速查参考- python基础 1 -> python版本选择+第一个小程序

    题外话: Python版本:最新的3.6 安装注意点:勾选添加路径后自定义安装到硬盘的一级目录,例如本人的安装路径: F:\Python 原因:可以自动添加python环境变量,自动关联.py文件,其 ...

  10. unity混音

    前言在游戏中,通常我们需要控制整个游戏的主音量(全局音量),并且单独控制背景音乐和其他音效(攻击.爆炸之类)的音量,这时我们可以用Audio Mixer来解决. 如果文章中有哪些地方写的不对, 欢迎指 ...