CSS之清除浮动(span/clearfix)
一、问题描述
web网页设计中，在div元素中有时候常伴有图文结合的post组件。为了使得文本在图像周围环绕，那么需要对图像区域使用float浮动。如果不做清除浮动，则会出现如下结果：
图像比文本高，且图像脱离并超出了父级元素的文档流。
源码：
<!DOCTYPE html>
<html>
<head>
<title>float demo span(block;clear;height)</title>
</style>
</head>
<body>
<div style="/*width: 300px;*//*height: 200px;*/padding:10px;border: 1px solid red;background-color: yellow;font-size: ">
<div class="photo" style="border: 1px solid black;padding:15px;float: left">
<img src="test.jpg" style="">
</div>
<section style="display: block;background-color: white;padding: 1px;">
<h3>肖像摄影</h3>
<p>
眼神锋利，嘴里叼着烟的画家；神情严肃，姿态自信的泥瓦匠；笑容憨厚，略有些拘谨的拳击手...... 600 多张不同年龄、职业的德国人的肖像，充满个性，又有着一脉相承的直率和倔强。这些作品来自一位以拍摄肖像而著名的德国摄影师——奥古斯特·桑德（August Sander，1876-1964）。
</p>
</section>
</div>
</body>
</html>
原因分析：
此处的div父级元素只能识别出子元素文本部分的高度，而图像比文本更高，所以高出部分就露出来了。那么，为了使得图像不超出母元素的高度，就必须进行float的浮动清除。
二、解决方案一
源码：在父级元素内的末尾处加上span[display:block;height:0;clear:both]
<span style="display: block;clear: left;padding: 15px;background-color: red;"></span>
解释：在浮动元素的后面兄弟元素(一般是末尾元素)中，加入span元素(display:block,clear:left(or right(根据浮动方向来)))：
原因：块级元素(display:block)要独占一块文档流(且独立一行)，再清除一下前面浮动兄弟元素的浮动方向的浮动，那本来应该浮动的span清除浮动后，自然要独占一行了(去掉padding后，对整体文档无影响)。
效果：
缺点：蛮力【需要强行加入span并添加其样式】：增加工作量；不利于页面优化
二、解决方案二【推荐】
源码：为div父级元素，设置公用类.clearfix
.clearfix:after {
overflow: auto;
display: block;
clear: both;
content: attr(data-sort); /* 一般为 ‘ ’，此处为做测试 */
visibility: hidden;
height:0; /*使得不占据文档流*/
}
/* .clearfix:before{
overflow: auto;
display: block;
clear: both;
content: ' ';
visibility: hidden;
height:0;
}*/
解释：略（见源码仔细领会）
效果：
优点：
组件化设计的思想，可以大面积公用；提高生产效率，也有利于页面优化
三、参考文档:
1.《网络设计的原理》|桧山佐知子：防止使用float时版面被破坏
2.图文来源：蜂鸟网：http://image.fengniao.com/534/5345869.html
CSS之清除浮动(span/clearfix)的更多相关文章
- 【css】清除浮动（clearfix 和 clear）的用法
本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就 ...
- 【css】清除浮动的几种方式
[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...
- HTML&CSS基础-清除浮动
HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...
- div+css之清除浮动
当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...
- CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...
- 【CSS】清除浮动的五种方式
清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式 *首先要明确的是,为什么要清除浮动? A 影响其他元素定位 父盒子高度为0,子盒子全部浮动.定位,子盒子不会撑开父盒子,下面的元 ...
- CSS——如何清除浮动
众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...
- 面试 CSS篇清除浮动及display:inline-block
一. 在div使用display:inline-block时,HTML代码中的回车换行键会被转化为一个空白符 如图 <style type="text/css"> *{ ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
随机推荐
- Mysql 乐观锁
转载:http://chenzhou123520.iteye.com/blog/1863407 乐观锁介绍: 乐观锁( Optimistic Locking ) 相对悲观锁而言,乐观锁假设认为数据一般 ...
- Java循环中try...finally...遇到continue
一段很简单的代码,先自己在大脑中给出结果: for (int i = 0; i < 5; i++) { System.out.println("enter: i=" + i) ...
- 详细且透彻的分析PCA原理
前两天面试问到了PCA,感觉讲得不是很透彻,这里再次详细写一下. 首先定义如下变量的含义: X:Rn*m,n个样本m个属性,对于第i个样本xi:R1*m. W:Rm*k,k个正交的单位正交的列向量组成 ...
- Linux学习之/etc/init.d/目录和rc.local脚本
init.d目录中包含很多系统服务的启动和停止脚本,比较常用的就是网络服务,当你修改了网络配置时,可以自行 sudo /etc/init.d/networking restart 命令来重启网络服务 ...
- BZOJ4771七彩树——可持久化线段树+set+树链的并+LCA
给定一棵n个点的有根树,编号依次为1到n,其中1号点是根节点.每个节点都被染上了某一种颜色,其中第i个节 点的颜色为c[i].如果c[i]=c[j],那么我们认为点i和点j拥有相同的颜色.定义dept ...
- Codeforces965E Short Code 【启发式合并】【堆】
题目大意: 给出总长度不超过1E+5的不重复字符串集,给每个字符串选一个前缀使得可以区分它. 题目分析: KAN出的DIV2难度一般不高,想升Ranting的可以试试. 简单的树上启发式合并,建出Tr ...
- 自学Python2.1-基本数据类型-字符串str(object) 上
自学Python之路 自学Python2.1-基本数据类型-字符串str(object) 上 字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串. 创建字符串 ...
- LoadRunner回放乱码
乱码的原因和服务器字符集编码相关,默认LR是gbk解码,如果服务器是utf8,那么需要改为utf8解码,这样中文就显示正常了. 通过查看源码,可以知道服务器的编码方式:<meta charset ...
- 去除外显子低质量reads时弹出错误“Invalid quality score value (char '#' ord 35 quality value -29) on line 4”和“Invalid quality score value (char '.' ord 46 quality value -18) on line 12”的解决方法
楼主跑以下程序时分别弹出了“fastq_quality_filter: Invalid quality score value (char '.' ord 46 quality value -18) ...
- list 删除一个元素的三种做法--python
我们以一个字符串为元素类型的 list 为例,进行列表元素的删除: l = ['no surfing', 'flippers'] 法一:remove(val) >>> l.remov ...