在前端开发布局中,经常会被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. 雨天的尾巴(bzoj3307)(线段树合并+树上差分)

    \(N\)个点,形成一个树状结构.有\(M\)次发放,每次选择两个点\(x,y\) 对于\(x\)到\(y\)的路径上(含\(x,y\))每个点发一袋\(Z\)类型的物品.完成 所有发放后,每个点存放 ...

  2. javascript中的数据类型和变量

    Number JavaScript不区分整数和浮点数,统一用Number表示,以下都是合法的Number类型: 123; // 整数123 0.456; // 浮点数0.456 1.2345e3; / ...

  3. Flask从入门到精通之Flash消息

    请求完成后,有时需要让用户知道状态发生了变化.这里可以使用确认消息.警告或者错误提醒.一个典型例子是,用户提交了有一项错误的登录表单后,服务器发回的响应重新渲染了登录表单,并在表单上面显示一个消息,提 ...

  4. 6. Ensemble learning & AdaBoost

    1. ensemble learning 集成学习 集成学习是通过构建并结合多个学习器来完成学习任务,如下图: 集成学习通过将多个学习学习器进行结合,常可以获得比单一学习器更优秀的泛化性能 从理论上来 ...

  5. iOS--MJRefresh的使用 上拉刷新和下拉加载

    1.一般使用MJRefresh 来实现上拉刷新和下拉加载功能 2.MJRefresh 下载地址:https://github.com/CoderMJLee/MJRefresh 3. MJRefresh ...

  6. Web端测试和移动端测试

    之前参加的项目有涉及Web端测试和移动端测试,简单的记录下他们之间的区别:   1.记录bug 在Web端可以通过系统自带的截图和QQ截图等方式来截取bug的图片,对于错误的地方可以用工具自带的标识来 ...

  7. php 比较2字符串相似度 百分比

    $n1 = similar_text($str1, $str1); $n2 = similar_text($str2, $str2); $nn = similar_text($str1, $str2) ...

  8. 【数组】Remove Duplicates from Sorted Array II

    题目: Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For ex ...

  9. OkHttp3实现Cookies管理及持久化

    转发自:http://www.codeceo.com/article/okhttp3-cookies-manage.html OKHttp3正式版刚发布了没几天,正好重构之前的代码,于是第一时间入坑了 ...

  10. vsts~CI/CD实现自动化编译

    打开你的vs online,选择build and release标签,进行自动化编译的开发. 一 新建,选择对应的源代码管理,我们以VSTS-GIT为例 二 选择你的项目所应对的开发框架,如.net ...