一、问题描述

  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)的更多相关文章

  1. 【css】清除浮动(clearfix 和 clear)的用法

    本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就 ...

  2. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  3. HTML&CSS基础-清除浮动

    HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...

  4. div+css之清除浮动

    当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...

  5. CSS中清除浮动的作用以及如何清除浮动

    1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...

  6. 【CSS】清除浮动的五种方式

    清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式 *首先要明确的是,为什么要清除浮动? A 影响其他元素定位 父盒子高度为0,子盒子全部浮动.定位,子盒子不会撑开父盒子,下面的元 ...

  7. CSS——如何清除浮动

    众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...

  8. 面试 CSS篇清除浮动及display:inline-block

    一. 在div使用display:inline-block时,HTML代码中的回车换行键会被转化为一个空白符 如图 <style type="text/css"> *{ ...

  9. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

随机推荐

  1. [Java] Thread的start()和run()函数区别

    1.start()方法来启动线程,真正实现了多线程运行,这时无需等待run方法体代码执行完毕而直接继续执行下面的代码: 通过调用Thread类的start()方法来启动一个线程,这时此线程是处于就绪状 ...

  2. Lodop多分出空白页的可能(情况1)

    在用Lodop进行打印超文本的时候,本身内容看上去只有一页,却分页分出空白的一页,很有可能有不可见内容的存在,下面是测试的一种情况,如html内部有内容占着空间,却是不可见的,如一些对象,或者如测试内 ...

  3. 工作流管库的bpmn部署在数据库中

    工作流管库的bpmn部署在数据库中 DB_schema_update_false  没有表则创建 有表则报错 DB_SCHEMA_UPDATE_TRUE 没有表则创建 有表则不创建 脚本更新则更新数据 ...

  4. windows部分常用命令

    dir 查看内容 md 新建目录 copy 复制 del 删文件 cls 清屏 tasklist 查看运行进程 taskkill /pid xxx 杀死进程xxx taskmgr 打开任务管理器 ms ...

  5. php-编译模块2

    PHP扩展-扩展的生成和编译 首先说明一下,PHP扩展有两种编译方式:方式一:在编译PHP时直接将扩展编译进去方式二:扩展被编译成.so文件,在php.ini里配置加载路径: 以下开始说明创建PHP扩 ...

  6. Dumb Bones UVA - 10529(概率dp)

    题意: 你试图把一些多米诺骨牌排成直线,然后推倒它们.但是如果你在放骨牌的时候不小心把刚放的骨牌碰倒了,它就会把相临的一串骨牌全都碰倒, 而你的工作也被部分的破坏了. 比如你已经把骨牌摆成了DD__D ...

  7. POJ1177(扫描线求周长并)

    题意:..求周长并... 解析:参考求面积并 图借鉴自:https://www.cnblogs.com/shuaiwhu/archive/2012/04/22/2464876.html 自下而上扫描 ...

  8. day22 time模块

    表示方式有三种 时间戳 给机器看的 float格式 格式化的字符传 给人看的 格式化时间 元祖 计算用的 结构化时间 1 # 时间戳时间 2 # 返回一个时间戳,表示从1970.1.1日到现在的秒数 ...

  9. loj#2009.「SCOI2015」小凸玩密室

    题目链接 loj#2009. 「SCOI2015」小凸玩密室 题解 树高不会很高<=20 点亮灯泡x,点亮x的一个子树,再点亮x另外的子树, 然后回到x的父节点,点亮父节点之后再点亮父节点的其他 ...

  10. 08 Zabbix Item类型之Zabbix agent类型

    点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 08 Zabbix Item类型之Zabbix agent类型 Zabbix agent类型的item是使用部署在服务器端的age ...