清除浮动有两种方法：

一种是加入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. 孤立森林（isolation forest）

    1.简介 孤立森林(Isolation Forest)是另外一种高效的异常检测算法,它和随机森林类似,但每次选择划分属性和划分点(值)时都是随机的,而不是根据信息增益或者基尼指数来选择. 在建树过程中 ...

  2. Sketch小妙招：在线分享设计

    Sketch是很多产品经理.UI.UX设计师常使用的一款的设计工具,但是我在使用Sketch的过程中发现了一个让我困扰的事儿,或者说它缺少了一个我非常需要的服务:在线分享设计.可能很多使用Sketch ...

  3. c++11多线程学习笔记之三 condition_variable使用

    从windows角度来说,condition_variable类似event. 阻塞等待出发,不过condition_variable可以批量出发. 代码如下: // 1111111.cpp : 定义 ...

  4. sqlldr 笔记

    表结构 CREATE table sqlloader_test ( f1 char(20), f2 char(20), f3 number(16), f4 date ); 数据文件data.csv 1 ...

  5. 关于某一discuz 6.0论坛故障的记录

    某日,额突然发现公司的discuz 6.0论坛在IE6浏览器下面显示出现问题: 每个链接都出现了下划线,很难看,不过已访问的链接(a:visted)却没有下划线,于是怀疑css.htm有问题.于是对c ...

  6. Django入门与实践-第20章：QuerySets（查询结果集）（完结）

    http://127.0.0.1:8000/boards/1/ #boards/models.py from django.utils.text import Truncator class Topi ...

  7. x+y+z=n的正整数解

    题:x+y+z=n,其中(n>=3),求x,y,z的正整数解的个数根据图象法:x>=1,y>=1,x+y<=n-1

  8. 判断tableVIew滑动的方向

    首先设置一个旧的偏移量为0; self.oldContent = 0; - (void)scrollViewDidScroll:(UIScrollView *)scrollView { if (scr ...

  9. 用Socket开发的一枚小型实时通信App

    Socket 英文原意是插座. 在网络世界里, 当一台主机温柔而体贴的同时提供多个服务时, 每个服务被绑定在一个端口上, 而每个端口就好像一个小插座. 用户们连接对应的插座去获取相应的服务. 在Nod ...

  10. （连通图）Network--POJ--3694

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