清除浮动有两种方法：

一种是加入clear:both:

一种是BFC申明：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>float的清除</title>
</head>
<style>
.clearfix:after { content: ''; display: table; clear: both; }
.clearfix { *zoom: 1; }
</style>
<body>
1.
<div style="background-color: #f5f5f5;" class="clearfix">
<img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left;margin-bottom:100px;" >
</div>
<div style="margin-top: 100px;">本文字离图片的距离是？</div>
2.
<div style="background-color: #f5f5f5; overflow: hidden;">
<img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left; margin-bottom: 100px;">
</div>
<div style="margin-top: 100px;">本文字离图片的距离是？</div><br><br><br>
3.
<div style="background-color: #f5f5f5;">
<img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left;margin-bottom:100px;" >
<div style="clear:both"></div>
</div>
<div style="margin-top: 100px;">本文字离图片的距离是？</div>

4.
<div style="background-color: #f5f5f5;" >
<img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left;" >
</div>
<div style="margin-top: 100px;">本文字离图片的距离是？</div>
<br>
</body>
</html>

第一个div块是通过在css中增加删除float的类，注意的是应该在有浮动float的父元素加入。其中的.clearfix { *zoom: 1; }是为了兼容低级浏览器

第二个div块是通过在加入float的DOM元素下面的加入style=“clear：both；”的同级元素来清除浮动

第三个div块在浮动元素的父元素上加入overflow: hidden;样式也可清除浮动（overflow: hidden;使得包含图片的div自成BFC）

第四个div没有清除浮动

清除float的方法的更多相关文章

  1. css 清除float的方法

    首先我们要理解这个flaot 为什么要清除,作为小白来说直接颠覆了我之前学的内容,因为之前学的东西虽然碰到float后,脱离文档流后给兄弟元素或者父元素造成影响,但是都是通过option来定位 要么绝 ...

  2. CSS 之 清除 float 常用的方法

    大多数前端使用.clearfix:after{ .....}  和 .clearit{....}的组合来清除浮动. 前端开发经常用到浮动 float:left; float:right; 有浮动就需要 ...

  3. 彻底理解浮动float CSS浮动详解 清除浮动的方法

    我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 ...

  4. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  5. 关于CSS中清除浮动的方法

    在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...

  6. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

  7. 8种CSS清除浮动的方法优缺点分析

    为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...

  8. CSS清除浮动_清除float浮动

    2.clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此di ...

  9. CSS清除浮动的方法

    CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...

随机推荐

  1. Tomcat的杂七杂八

    localhost_access_log.2016-01-15.txt  原来这里面有访问记录. /logs/catalina.2016-01-22.log 这里有显示失败的信息 2016-01-23 ...

  2. DB2 runstats、reorgchk、reorg 命令【转载】

    1.runstats runsats可以搜集表的信息,也可以搜集索引信息.作为runstats本身没有优化的功能,但是它更新了统计信息以后,可以让DB2优化器使用最新的统计信息来进行优化,这样优化的效 ...

  3. Linux常见配置文件

    一./etc 配置文件 /etc/passwd 用户数据库,其中的域给出了用户名.真实姓名.家目录.加密口令和用户的其他信息 /etc/group 类似/etc/passwd ,但说明的不是用户而是组 ...

  4. python正则表达式转义注意事项

    无论哪种语言,在使用正则表达式的时候都避免不了一个问题,就是在匹配元字符的时候,需要对元字符进行转义,让 正则表达式引擎将其当做普通字符来匹配.本文主要以python为例,说明一下转义中需要注意的问题 ...

  5. 一次简单完整的自动化登录测试-基于python+selenium进行cnblog的自动化登录测试

    Web登录测试是很常见的测试,手动测试大家再熟悉不过了,那如何进行自动化登录测试呢!本文就基于python+selenium结合unittest单元测试框架来进行一次简单但比较完整的cnblog自动化 ...

  6. Android-ColorsUtil工具类

    颜色工具类 public class ColorsUtil { private ColorsUtil() { throw new Error("Do not need instantiate ...

  7. memcached分布式缓存系统

    在数据驱动的Web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了数据库负载.缓存是解决这个问题的好办法.但是ASP.NET中的虽然已经可以实现对页面局部进行缓存,但还是不够灵活.此时 ...

  8. DBCC--SHRINKDATABASE

    --DBCC SHRINKDATABASE --收缩数据库 --USAGE: dbcc SHRINKDATABASE ( { 'database_name' | database_id | 0 } [ ...

  9. Source Multiplayer Networking【转】

    https://developer.valvesoftware.com/wiki/Source_Multiplayer_Networking Multiplayer games based on th ...

  10. asp.net 进行发送邮箱验证

    利用发送邮件验证码进行注册验证 需要引用using System.Net.Mail;命名空间 #region /// <summary> /// 发送邮件 /// </summary ...