理解clear：both属性（转）
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属性（转）的更多相关文章
- 如何理解clear的css属性?
参考文章: http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html clear: 只影响使用 clear样式属性的 元素本身, ...
- CSS-float详解，深入理解clear:both[转+部分原创]
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素 ...
- 正确理解 clear:both
要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以). 2. 浮动元素后边的非浮动元素显示问题. 3. 多个 ...
- 【JVM虚拟机】(7)---深入理解Class中-属性集合
#[JVM虚拟机](7)---深入理解Class中-属性集合 之前有关class文件已经写了两篇博客: 1.[JVM虚拟机](5)---深入理解JVM-Class中常量池 2.[JVM虚拟机](6)- ...
- iOS runtime探究(三): 从runtime開始理解OC的属性property
你要知道的runtime都在这里 转载请注明出处 http://blog.csdn.net/u014205968/article/details/67639303 本文主要解说runtime相关知识, ...
- 12.Clear Flags属性与天空盒
选中Hierarchy面板的摄像机,然后在右侧Inspector面板的Clear Flags属性可以找到有如下选项, SkyBox:天空盒(默认效果,让场景看着有一个天空) Solid Color:固 ...
- 理解CSS Clip属性及用法
应用Clip属性实现的一个简单效果图: 样式写法: .my-element { position: absolute; clip: rect(10px 350px 170px 0); /* IE ...
- CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性
最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里 ...
- yii2知识点理解（成员属性）
yii2成员属性 成员变量类似于public $a; 成员属性类似于 public function a(){} 成员变量是就类的结构构成而言的概念,而属性是就类的功能逻辑而言的概念 成员属性应用: ...
随机推荐
- 【文文殿下】ExBSGS
无需逆元版本: #include<cstdio> #include<cassert> #include<cmath> #include<map> typ ...
- fastadmin的页面是如何生成的？
第一步: 访问URL http://www.fastadmin.cc/admin/mydir/test/index?addtabs=1 对应的方法是admin模块,controller文件夹下的myd ...
- *p++与(*p)++与*(p++)------自增运算符常见误区
自增运算符(++) 自增\自减运算符分为前缀形(++a)和后缀形(a++),这里重点分析自增 大部分人对前缀和后缀的理解一般是,前缀形式是先++再使用(先变后用),后缀形式是先使用再++(先用后变) ...
- 转载-浅谈Ddos攻击攻击与防御
EMail: jianxin#80sec.comSite: http://www.80sec.comDate: 2011-2-10From: http://www.80sec.com/ [ 目录 ]一 ...
- 记录Kali Linux 安装输入法过程
1.首先设置源,打开终端输入. eafpad /etc/apt/sources.list 清空Sources.list里的内容,设置一个阿里云的源就行了. deb http://mirrors.ali ...
- 【OpenCV3】threshold()函数详解
threshold()函数源码 double cv::threshold( InputArray _src, OutputArray _dst, double thresh, double maxva ...
- POJ 2245
//此题一看便是简单的回溯题用DFS+回溯便可以做出来了. #include <iostream> #define MAXN 20 using namespace std; int _m[ ...
- Nginx基本入门
转自:http://blog.csdn.net/u012486840/article/details/53098890 1.静态HTTP服务器 首先,Nginx是一个HTTP服务器,可以将服务器上的静 ...
- eclipseGUI的可视化开发工具插件
一 各种GUI开发插件的特色 Eclipse并不自带GUI的可视化开发工具,那么如果要在Eclipse进行可视化的GUI开发,就需要依靠第三方的插件. 1. Visual Editor Eclip ...
- .Net Core 发布WindowsServices
项目代码文件夹 执行命令 dotnet publish -c Release -r win-x64