在前端开发布局中，经常会被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. LeetCode题解-147 对链表进行插入排序

    对链表进行插入排序. 插入排序的动画演示如上.从第一个元素开始,该链表可以被认为已经部分排序(用黑色表示). 每次迭代时,从输入数据中移除一个元素(用红色表示),并原地将其插入到已排好序的链表中. 插 ...

  2. Django(图书管理系统2)

    day64 内容回顾     1. ORM外键操作         图书表和出版社表  多对一 的关系              # 书     class Book(models.Model):   ...

  3. 使用git时出现Please make sure you have the correct access rights and the repository exists.问题已解决。

    使用git时,出现Please make sure you have the correct access rights and the repository exists.问题已解决. 今天我在使用 ...

  4. thuwc2019总结

    275,是我的自己的估分 而350,是面试线 就发挥而言,这次的发挥相当糟糕,第一天选择全场打暴力而不打签到题正解,第二天因A题思路想偏造成2h额外时间花费.第二题与第三题之间,我选择了难打的第三题而 ...

  5. CentOS7启动Tomcat报错：./startup.sh: Permission denied

    错误信息:./startup.sh: Permission denied 执行./startup.sh,或者./shutdown.sh的时候, 报:Permission denied,因为是执行tom ...

  6. Linux文件目录管理

    Linux文件目录管理 文件的路径 路径: . 表示当此层目录 .. 表示上一层目录 - 代表前一个工作目录 ~ 代表"目前用户身份"所在的文件夹 ~account 代表accou ...

  7. Android Studio修改字体大小

    android studio提供的主题是不能修改字体和字体大小的,如果要修改大小就的另存一份自定义的主题了. 1.启动Android Studio,菜单"File"-"S ...

  8. C51单片机中data、idata、xdata、pdata的区别

    C51单片机中data.idata.xdata.pdata的区别 data: 固定指前面0x00-0x7f的128个RAM,可以用acc直接读写的,速度最快,生成的代码也最小. idata: 固定指前 ...

  9. sersync+rsync=实时异步备份

    环境准备 服务器两台 rsync-server:192.168.1.8  (备份服务器) sersync-node1:192.168.1.9 (需要备份的服务器) 系统 CentOS7.4 关闭防火墙 ...

  10. 深入理解Java虚拟机：垃圾收集器与内存分配策略

    目录 3.2 对象已死吗 判断一个对象是否可被回收 引用类型 finalize() 回收方法区 3.3. 垃圾收集算法 1.Mark-Sweep(标记-清除)算法 2.Copying(复制)算法 3. ...