清除浮动有两种方法：

一种是加入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. php连接mssql

    首先修改php.ini,将下行的前的分号去掉. extension=php_mssql.dll 由于本机没有安装客户端,所以要将ntwdblib.dll复制到C:\WINDOWS\system32目录 ...

  2. win8 app code中设置Resources里定义好的Style

    WPF中应该可以用这个: rectangle.Style = (Style)FindResource("FormLabelStyle"); 但 Win8.1 App是个精简框架,F ...

  3. 纯css手写圆角气泡对话框 微信小程序和web都适用

    嗯……我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那种尖角的.这其中还遇上了个尴尬的问题,z-index不生效 无非就是两种方法,一种是使用图片再定位拼接起来使用,太简单了具体就不详细的说了. ...

  4. PythonWEB框架之Flask--2

    10.请求扩展 1 before_request 类比django中间件中的process_request,在青丘收到之前绑定一个函数做一些事情 #基于它做用户登录认证 @app.before_req ...

  5. UVa 12118 nspector's Dilemma （构造+DFS+欧拉回路）

    题意:给定n个点,e条边和每条边的长度t,每两个点之间都有路相连,让你求一条最短的路经过这e条边. 析:刚开始想到要判连通,然后把相应的几块加起来,但是,第二个样例就不过,后来一想,那么有欧拉回路的还 ...

  6. CentOS中的一些小技巧和特殊知识

    一:软件: firefox 1.在tab栏右键可以打开上一次关闭的标签. 2.在上面的搜索栏可以添加搜索引擎,这样就不需要再打开标签页访问搜索引擎主页来搜索了. 3.获取firefox下载弹框的资源U ...

  7. 大文件webuploader的基本使用

    webuploader的简单使用 需要的文件   自备  百度很多 webuploader.js  uploader.swf  jQuery <!DOCTYPE html> <htm ...

  8. 5) mvn archetype:generate

    获取帮助 mvn -h 命令格式 usage: mvn [options] [<goal(s)>] [<phase(s)>] -D,--define <arg> D ...

  9. struts2 一些注解

    实现的JSP页面位置 web-root/jsp/user/add.jsp /update.jsp // /* @Namespace("/t") @AllowedMethods(va ...

  10. （匹配 二维建图） Antenna Placement --POJ --3020

    链接: http://poj.org/problem?id=3020 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82834#probl ...