清除float的方法
清除浮动有两种方法:
一种是加入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的方法的更多相关文章
- css 清除float的方法
首先我们要理解这个flaot 为什么要清除,作为小白来说直接颠覆了我之前学的内容,因为之前学的东西虽然碰到float后,脱离文档流后给兄弟元素或者父元素造成影响,但是都是通过option来定位 要么绝 ...
- CSS 之 清除 float 常用的方法
大多数前端使用.clearfix:after{ .....} 和 .clearit{....}的组合来清除浮动. 前端开发经常用到浮动 float:left; float:right; 有浮动就需要 ...
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
- css清除浮动的方法汇总
这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...
- 关于CSS中清除浮动的方法
在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...
- 【转】CSS清除浮动_清除float浮动
CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...
- 8种CSS清除浮动的方法优缺点分析
为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...
- CSS清除浮动_清除float浮动
2.clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此di ...
- CSS清除浮动的方法
CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...
随机推荐
- Can't use Subversion command line client: svn. Errors found while svn working copies detection.
idea 报错: Can't use Subversion command line client: svn. Errors found while svn working copies detect ...
- python 线程和进程概述
计算机中执行任务的最小单元:线程 IO操作利用CPU GIL,全局解释器锁 IO密集型: 多线程(不用CPU) 计算机密集型(用CPU) 进程和线程的目的:提高执行效率 1.单进程单线程,主进程.主线 ...
- 【C#】VS2015开发环境的安装和配置(转)
出处: http://www.cnblogs.com/rainmj/p/5636518.html http://www.cnblogs.com/rainmj/p/5636529.html http:/ ...
- 用eclipse创建maven的webapp项目
来自http://www.cnblogs.com/candle806/p/3439469.html和http://blog.csdn.net/chuyuqing/article/details/288 ...
- 深度linux没有ll等命令的解决办法
编辑~/.bashrc, 添加alias 如下 vim ~/.bashrc 设置别名. 添加如下行 alias ll='ls -alF' alias la='ls -A' alias vi='vim' ...
- Perf -- Linux下的系统性能调优工具,第 1 部分
Perf 简介 Perf 是用来进行软件性能分析的工具. 通过它,应用程序可以利用 PMU,tracepoint 和内核中的特殊计数器来进行性能统计.它不但可以分析指定应用程序的性能问题 (per t ...
- Lucene.net 性能《第八篇》
一.IndexReader性能分析 IndexReader完成了打开所有索引文件和提供底层reader API等繁重的工作,而IndexSearch则要简单得多.由于打开一个IndexReader需要 ...
- CAS实战の简介
一.SSO简介 单点登录的英文名称为Single Sign-On,简写为SSO,它是一个用户认证的过程,允许用户一次性进行认证之后,就访问系统中不同的应用:而不需要访问每个应用时,都重新输入密码.IB ...
- Difference between the Bill of distribution and sourcing rule.
https://forums.oracle.com/thread/936768 This is from a users guide Oracle Supply Chain Planning ...
- JavaOperator小框架制作【精品博客】
以下是运算小框架的制作过程,以及核心代码,完成(计算,监听,回馈等): package com.demo2.operator; /** * 运算标准接口 * @author Liudeli */ pu ...