清除浮动有两种方法：

一种是加入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. source Insight工程的简单使用

    本文以管理虚拟机里面的uboot为例: 1.选择project->New project->选择工程路径,假设为D:\uboot:->project has its own conf ...

  2. SVN中检出 和 导出 的区别

    SVN中检出 和 导出 的区别:检出得到的文件夹中,是受SVN客户端控制的,对其进行文件或文件夹的增删改操作都会被SVN客户端识别出来,对其可以进行update.commit操作.其中含有.svn隐藏 ...

  3. div和span元素的区别

    2个都是用来划分区间但是没有实际语义的标签,差别就在于div是块级元素,不会其他元素在同一行;span是内联元素,可以与其他元素位于同一行. DIV 和 SPAN 元素最大的特点是默认都没有对元素内的 ...

  4. C和C++之间库的互相调用

    http://www.cppblog.com/wolf/articles/77828.html 昨晚有个朋友问我关于在C中调用C++库的问题,今天午饭后,由于脖子痛的厉害而没有加入到我们组的“每天一战 ...

  5. KbmMW 认证管理器说明(转载)

    这是kbmmw 作者关于认证管理器的说明,我懒得翻译了,自己看吧. There are 5 parts of setting up an authorization manager: A) Defin ...

  6. 二进制搭建kubernetes多master集群【二、配置flannel网络】

    上一篇我们已经搭建etcd高可用集群,参考:二进制搭建kubernetes多master集群[一.使用TLS证书搭建etcd集群] 此文将搭建flannel网络,目的使跨主机的docker能够互相通信 ...

  7. 2018.09.22 牧场的安排（状压dp）

    描述 农民 John 购买了一处肥沃的矩形牧场,分成M*N(1 <= M <= 12; 1 <= N <= 12)个 格子.他想在那里的一些格子中种植美味的玉米.遗憾的是,有些 ...

  8. vs2010点调试，显示系统找不到指定的文件

    首先,查看“项目”-“属性”-“链接器”-“常规”-“输出文件”,路劲是否是“bin/xxx.exe”,如果是请继续看我的解答,否则请忽略下面的内容.原因是用VS2010加载调试以前的VC6.0下的程 ...

  9. OpenNI体感应用开发实战 （Kinect相机）

    一直以为Kinect是双目摄像机,或者是三目,看到那三个摄像头怎么可能不产生这样的疑惑,实际上它确实是单目摄像机,它三个摄像头分别为:红外发射器,RGB彩色相机,红外接收器.而其中,红外发射器和红外接 ...

  10. Linux内存子系统及常用调优参数

    1>内存子系统 1>组件: slab    allocator buddy    system kswapd pdflush 2>虚拟化环境: PA:进程地址: HA:虚拟机地址: ...