在前端开发布局中,经常会被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. 实现一个算法,寻找字符串中出现次数最少的、并且首次出现位置最前的字符 如"cbaacfdeaebb",符合要求的是"f",因为他只出现了一次(次数最少)。并且比其他只出现一次的字符(如"d")首次出现的位置最靠前。

    实现一个算法,寻找字符串中出现次数最少的.并且首次出现位置最前的字符如"cbaacfdeaebb",符合要求的是"f",因为他只出现了一次(次数最少).并且比其 ...

  2. docker容器的基本操作

    docker容器是独立运行的一个或一组应用,以及它们的运行态环境.下面具体介绍如何管理一个容器,包括容器的创建,启动和停止等. 启动容器 基于镜像新建一个容器并启动 将终止状态的容器重新启动 新建并启 ...

  3. Jmeter修改自身启动IP

    先说一下问题,控制机访问压力机都是可以的,但是压力机访问控制机就不行了报:2019/04/13 16:05:49 ERROR - jmeter.samplers.RemoteTestListenerW ...

  4. 【learning】微信跳一跳辅助c++详解 轻松上万 【上】

    写在前面 17年年底Wechat出了这个跳一跳的小游戏,今年2月份的时候简单地玩了一下,发现被游戏虐了(手太残了只能跳20多).     今天刚好有点空,于是就花了一个下午的时间写了一个跳一跳的c++ ...

  5. 转 ZFC公理系统

    http://blog.sina.com.cn/s/blog_5d045b5c0100spld.html 首先,ZFC集合论中的公理大致分为3组: 1.外延公理. 2.子集公理模式.无序对公理.并集公 ...

  6. Collection、Set、List概念上的区别及关联

    类图如下:

  7. (转)MYSQL线程池总结(一)

    MYSQL线程池总结(一)  原文:http://www.cnblogs.com/cchust/p/4510039.html 线程池是Mysql5.6的一个核心功能,对于服务器应用而言,无论是web应 ...

  8. 腾讯云域名申请+ssl证书申请+springboot配置https

    阿里云域名申请 域名申请比较简单,使用微信注册阿里云账号并登陆,点击产品,选择域名注册 输入你想注册的域名 进入域名购买页面,搜索可用的后缀及价格,越热门的后缀(.com,.cn)越贵一般,并且很可能 ...

  9. oracle_jdbc_Query

    本例子程序是根据马士兵老师所讲+自己的注释.写的比较全面,特别是最后释放资源的代码. package com.ayang.jdbc; import java.sql.*; public class T ...

  10. log4j:WARN No appenders could be found for logger (org.apache.hadoop.metrics2.lib.MutableMetricsFactory). log4j:WARN Please initialize the log4j system properly. log4j:WARN See http://logging.apache.o

    上面的报错是在本地java调试(windows) hadoop集群 出现的 解决方案: 在resources文件夹下面创建一个文件log4j.properties(这个其实hadoop安装目录下的 e ...