在前端开发布局中，经常会被float这个属性搞晕，尤其是新手

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：

img

{

    float:right;

}

</style>

</head>

<body>

<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>

<p>

<img src="logocss.gif" width="95" height="84" />

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

</p>

</body>

这是float的常见用法：对于文字包围图片
但是在div布局中 这里举一个例子：

<head>

    <style>

        .ob-title{

            background-color: orange;

        }

        .ob-body{

            background-color: #ddd;

        }

        .ob-body .menu{

            float: left;

            width: 200px;

            background-color: pink;

        }

        .ob-body .content{

            float: left;

            background-color: aquamarine;

        }

       /* .clearfix:after{    /*在.clearfix后边追加一个隐藏的block,带一个clear:both属性*/

            content: "";

            display: block;  /*block宽度会横向填充满屏幕，在父元素的最后追加一个height:0，占满屏幕的看不见的细长条*/

            line-height: 0;

            clear: both;  /*这个最下边细长条左右两边都清除float*/

        }*/ //先不用这个style

    </style>

</head>

<body style="margin: 10px;">

    <div class="ob-title">头部信息</div>

    <div class="ob-body clearfix">   <!--此处调用尾类-->

        <div class="menu">左侧菜单</div>

        <div class="content">右侧内容</div>

        <!--<div style="clear: both;"></div>-->  <!--第二种写法，不用调用clearfix类-->

    </div>

</body>

结果：

灰色的背景色并没有添加到第二行，因为第二行都是float的，和.ob-body不在一个层面上，第二行浮在.ob-body上层
现在我们把.clearfix的注释拿掉

 <style>

        .ob-title{

            background-color: orange;

        }

        .ob-body{

            background-color: #ddd;

        }

        .ob-body .menu{

            float: left;

            width: 200px;

            background-color: pink;

        }

        .ob-body .content{

            float: left;

            background-color: aquamarine;

        }

        .clearfix:after{    /*在.clearfix后边追加一个隐藏的block,带一个clear:both属性*/

            content: "";

            display: block;  /*block宽度会横向填充满屏幕，在父元素的最后追加一个height:0，占满屏幕的看不见的细长条*/

            line-height: 0;

            clear: both;  /*这个最下边细长条左右两边都清除float*/

        }

    </style>

</head>

<body style="margin: 10px;">

    <div class="ob-title">头部信息</div>

    <div class="ob-body clearfix">   <!--此处调用尾类-->

        <div class="menu">左侧菜单</div>

        <div class="content">右侧内容</div>

        <!--<div style="clear: both;"></div>-->  <!--第二种写法，不用调用clearfix类-->

    </div>

结果：

最后解析一下：为什么加了clearfix就ok了。
两种写法其实一个意思，就是在.ob-body的最后加入一个空的<div>(只要是块的就行，因为只有块，才可以横向撑满)，
这个<div>其实就是一个看不见的细长条，因为他在.ob-body的最下边，并且并不是float的，一定会受到.ob-body的背景色的控制，他的存在定义了.ob-body的高度，所以高度范围内都会被灰色的背景色影响到。并且这个最下边的<div>必须要有clear:both,不然如果只是标准流，会紧贴在第一行的底部，当然不能涵盖第二行了，其实这个例子里使用clear:left也有效（因为第二行都是float:left），但为了通用性，就使用both吧.并且也验证了:这个规则只能影响使用清除的元素本身，不能影响其他元素,clear了隐藏div的both。

理解clear：both属性（转）的更多相关文章

  1. 如何理解clear的css属性?

    参考文章: http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html clear: 只影响使用 clear样式属性的 元素本身, ...

  2. CSS-float详解，深入理解clear:both[转+部分原创]

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素 ...

  3. 正确理解 clear:both

    要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以). 2. 浮动元素后边的非浮动元素显示问题. 3. 多个 ...

  4. 【JVM虚拟机】(7)---深入理解Class中-属性集合

    #[JVM虚拟机](7)---深入理解Class中-属性集合 之前有关class文件已经写了两篇博客: 1.[JVM虚拟机](5)---深入理解JVM-Class中常量池 2.[JVM虚拟机](6)- ...

  5. iOS runtime探究(三): 从runtime開始理解OC的属性property

    你要知道的runtime都在这里 转载请注明出处 http://blog.csdn.net/u014205968/article/details/67639303 本文主要解说runtime相关知识, ...

  6. 12.Clear Flags属性与天空盒

    选中Hierarchy面板的摄像机,然后在右侧Inspector面板的Clear Flags属性可以找到有如下选项, SkyBox:天空盒(默认效果,让场景看着有一个天空) Solid Color:固 ...

  7. 理解CSS Clip属性及用法

    应用Clip属性实现的一个简单效果图: 样式写法: .my-element { position: absolute; clip: rect(10px  350px  170px  0); /* IE ...

  8. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  9. yii2知识点理解（成员属性）

    yii2成员属性 成员变量类似于public $a; 成员属性类似于 public function a(){} 成员变量是就类的结构构成而言的概念,而属性是就类的功能逻辑而言的概念 成员属性应用: ...

随机推荐

  1. for循环、for in整理

    for循环 作用:按照一定的规律,重复去做某件事情,此时我们就需要使用循环来处理了 例子1:倒着输出每一项 <script type="text/javascript"> ...

  2. 【UVA11107 训练指南】Life Forms【后缀数组】

    题意 输入n(n<=100)个字符串,每个字符串长度<=1000,你的任务是找出一个最长的字符串使得超过一半的字符串都包含这个字符串. 分析 训练指南上后缀数组的一道例题,据说很经典(估计 ...

  3. 分布式ehcache缓存

    今天在这里了记录一下学习ehcache分布式集群的过程. ehcache的三种最为常用集群方式,分别是 RMI.JGroups 以及 EhCache Server . 这里主要讲一下rmi方式. 1. ...

  4. Web安全学习图径——系列课程推荐

    本文作者:i春秋作家 大哥哥团长 说到Web安全必须要了解Web方面的一些基础知识做为铺垫的去的去学习这门技术,因为不是人人都可以直接先渗透在进行编程等方面学习的.所以为了更好的入门的Web安全必须要 ...

  5. IntelliJ IDEA优秀插件（编程通用）

    一.IntelliJ IDEA开发 最近大部分开发IDE工具都切换到了,所以也花了点心思去找了相关的插件.这里整理的适合各种语言开发的通用插件,也排除掉IntelliJ IDEA自带的常用插件了(有些 ...

  6. jvm(1)类的加载（二）(自定义类加载器）

    [深入Java虚拟机]之四:类加载机制 1,从Java虚拟机的角度,只存在两种不同的类加载器: 1,启动类加载器:它使用C++实现(这里仅限于Hotspot,也就是JDK1.5之后默认的虚拟机,有其他 ...

  7. window本地运行mapreduce程序

    mapreduce的运行方式一般有两种,一是从本地导出一个jar包,在传到虚拟机上运行,这样调试起来非常的不方便,如果出现错误就需要重新导出jar包. 第二种方式是在本地直接运行,但是在运行前需要进行 ...

  8. Lingo 做线性规划 - Financial Applications

    Reference: <An Introduction to Management Science Quantitative Approaches to Decision Making, Rev ...

  9. mysql互为主从实战设置详解及自动化备份(Centos7.2)

    mysql互为主从实战设置详解(Centos7.2) 第一步:mysql配置  my.cnf配置 服务器1 (10.89.10.90) [mysqld]  server-id=1  log-bin=/ ...

  10. 【Java并发编程】：加锁和volatile变量

    加锁和volatile变量两者之间的区别: 1.volatile变量是一种稍弱的同步机制在访问volatile变量时不会执行加锁操作,因此也就不会使执行线程阻塞,因此volatile变量是一种比syn ...