一、问题描述

　　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. JavaScript——AJAX

    AJAX技术是网页构建的必备技能之一,本文希望能帮助大家轻松的学习这项技术 一.什么是ajax? ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页. 二.如何使 ...

  2. 非关心数据库无法进行连表查询 所以我们需要在进行一对多查询时候 无法满足 因此需要在"1"的一方添加"多"的一方的的id 以便用于进行连表查询 ; 核心思想通过id进行维护与建文件

     非关心数据库无法进行连表查询 所以我们需要在进行一对多查询时候 无法满足 因此需要在"1"的一方添加"多"的一方的的id 以便用于进行连表查询 ; 核心思想通 ...

  3. VMware虚拟机看不到共享目录

    1. 确认VMtools已经装好,开启共享文件夹,设置好共享目录 2.执行命令 sudo mount -t vmhgfs .host:/ /mnt/hgfs如果出现错误: Error: cannot ...

  4. maven-assembly-plugin把java工程打包成为一个可执行的jar包

    用Java写了一个小工具,使用maven java 工程.写完后,想打包成一个可执行的jar包. 使用maven的插件maven-assembly-plugin pom.xml里添加 <buil ...

  5. 数字对——RMQ+二分答案

    题目描述 小H是个善于思考的学生,现在她又在思考一个有关序列的问题. 她的面前浮现出一个长度为n的序列{ai},她想找出一段区间[L, R](1 <= L <= R <= n). 这 ...

  6. BZOJ3419[POI2013]taxis——贪心

    题目大意: 一条线段有三个点,0为初始位置,d为出租车总部位置,m为家的位置,人要叫车,有n辆车可以提供,每辆车有一个路程上限,并且都从车站出发,叫的车行驶之后不必须回到车站,问最少叫几辆车. 一定能 ...

  7. BZOJ3510 首都（LCT）

    即动态维护树的重心.考虑合并后的新重心一定在两棵树的重心的连线上.于是对每个点维护其子树大小,合并时在这条链的splay上二分即可.至于如何维护子树大小,见https://blog.csdn.net/ ...

  8. 详解HTTP协议

    一 什么是HTTP协议 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网服务器传输超文本到本地浏览器的传送协议.HTTP 是基于 TCP/ ...

  9. window.onload和document.ready

    浏览器解析大致有以下几个步骤: (1)    解析HTML结构 (2)       加载外部脚本和样式 (3)       解析并执行脚本代码 (4)       构造HTML DOM 模型 (5)  ...

  10. Sightseeing tour HDU - 1956（混合欧拉回路）

    题意: 有n个点,m条边,其中有单向边和双向边,求是否存在欧拉回路 解析: 刚开始想...判断一下每个点的度数不就好了...emm..还是年轻啊.. 判断是解决不了问题的,因为可能会有某两个点冲突,比 ...