清除浮动有两种方法：

一种是加入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. msys2 git status显示中文文件名问题

    git config [--global] core.quotepath off https://stackoverflow.com/questions/5854967/git-msysgit-acc ...

  2. centos6.5 redis 安装配置及java调用

    1.安装gcc 执行命令  yum install gcc 2. 安装ruby环境 yum install ruby yum install rubygems gem install redis 下载 ...

  3. AJAX学习必备三本书

    <AJAX基础教程>AJAX必备图书之一.国内发行的第一本AJAX图书,也是目前最好的AJAX入门书,如果您是AJAX新手,此书是最好的入门图书.本书基本包括了实现Ajax需要了解的大部分 ...

  4. 1024 Hello World

    哈哈,原来今天是程序员的节日啊,快乐咯,可是今天好冷好冷~~

  5. python按行读取并替换

      fp = open(''test2.txt','w') #打开你要写得文件test2.txt lines = open('test1.txt').readlines() #打开文件,读入每一行 f ...

  6. MATLAB矩阵的一些用法

    1.怎样去提取和修改矩阵中的一个元素. (1)创建一个矩阵 >> A=[1,2,3,4;5,6,7,8;9,10,11,12;13,14,15,16]A =     1     2     ...

  7. 20170908工作日记--UML画类图、HTTP协议、Volley源码走读

    随手搜了一下,Android studio居然能够自动帮追我们生成UML的类图,简直太棒了http://www.gcssloop.com/course/UsePlantUMLInAS(Win),具体做 ...

  8. (网络流) Island Transport --Hdu -- 4280

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=4280 源点是West, 汇点是East, 用Dinic带入求就好了 代码:要用c++提交 #pragma ...

  9. hdu 5011 Nim+拿完分堆

    http://acm.hdu.edu.cn/showproblem.php?pid=5011 有N堆珠子,两个人轮流拿,最少拿一个,可以全拿,每次只能从一个堆里拿,不能从多堆同时拿:拿完之后该人还有一 ...

  10. php学习之路-笔记分享20150327

    由于公司需要,不得已是php也学习并用了段时间做了两个项目,现也分享出笔记.需要源文档的留下邮箱,.