使用display：inline-block会出现的情况：

1.使块元素在一行显示
2.使内嵌支持宽高
3.换行被解析了
4.不设置的时候宽度由内容撑开
5.在IE6,7下步支持块标签

由于inline-block属性换行的时候被解析（有间隙）故解决方法使用浮动float:left/right

使用浮动时出现的情况：

1.使块元素在一行显示
2.使内嵌元素支持宽高
3.不设置不宽高的时候宽度由内容撑开
4.换行不被解析（故使用行内元素的时候清除间隙的方法可以使用浮动）
5.元素添加浮动，会脱离文档流，按照指定的一个方向移动，直到碰到父级的边界或者另一个浮动元素停止（文档流是文档中可显示对象在排列时所占用的位置）

<!DOCTYPE HTML>

<html>

<head>

<meta 

http-equiv="Content-Type" content="text/html; 

charset=utf-8">

<title>无标题文档</title>

<style>

div,span{height:100px;background:red;border:1px 

solid #000; 

float:left;}

/*

inline-block

1.使块元素在一行显示

2.使内嵌支持宽高

3.换行被解析了

4.不设置宽度的时候宽度由内容撑开

5.在IE6,7下不支持块标签

浮动:

1.使块元素在一行显示

2.使内嵌支持宽高

3.不设置宽度的时候宽度由内容撑开

*/

</style>

</head>

<body>

<div 

class="div1">div1</div>

<div 

class="div2">div2</div>

<span 

class="span1">span1</span>

<span 

class="span2">span2</span>

</body>

</html>

下面的代码只有box1浮动，则box1，box2重叠一起。两者都浮动就不会重叠

<!DOCTYPE HTML>

<html>

<head>

<meta 

http-equiv="Content-Type" content="text/html; 

charset=utf-8">

<title>无标题文档</title>

<style>

.box1{ 

width:100px;height:100px;background:red; float:left;}

.box2{ 

width:200px;height:200px;background:blue; /* 

float:left;*/}

</style>

</head>

<body>

<div 

class="box1"></div>

<div 

class="box2"></div>

</body>

</html>

清浮动的方法：

1.给父级也加浮动（这种情况当父级margin:0 auto;时不居中）

<!DOCTYPE HTML>

<html>

<head>

<meta 

http-equiv="Content-Type" content="text/html; 

charset=utf-8">

<title>无标题文档</title>

<style>

.box{ 

width:300px;margin:0 auto;border:10px solid #000; float:left;}

.div{ 

width:200px;height:200px;background:red;float:left;}

/*

 清浮动

 1.给父级也加浮动(不居中了)

*/

</style>

</head>

<body>

<div 

class="box">

 <div 

class="div"></div>

</div>

</body>

</html>

2.给父级加display:inline-block;(同方法1，不居中。只有IE6,7居中)

<!DOCTYPE HTML>

<html>

<head>

<meta 

http-equiv="Content-Type" content="text/html; 

charset=utf-8">

<title>无标题文档</title>

<style>

.box{ 

width:300px;margin:0 auto;border:10px solid #000; 

display:inline-block;}

.div{ 

width:200px;height:200px;background:red;float:left;}

/*

 清浮动

 1.给父级也加浮动

 2.给父级加display:inline-block

*/

</style>

</head>

<body>

<div 

class="box">

 <div 

class="div"></div>

</div>

</body>

</html>

3.在浮动元素下加<div class="clear"></div>
 .clear{height:0px;font-size:0;clear:both;}但是在ie6下，块元素有最小高度，即当height<19px时，默认为19px，解决方法：font-size:0;或overflow:hidden;

<!DOCTYPE HTML>

<html>

<head>

<meta 

http-equiv="Content-Type" content="text/html; 

charset=utf-8">

<title>无标题文档</title>

<style>

.box{ 

width:300px;margin:0 auto;border:10px solid #000;}

.div{ 

width:200px;height:200px;background:red;float:left;}

.clear{ 

height:0px;font-size:0;clear:both;}

/*

 清浮动

 1.给父级也加浮动

 2.给父级加display:inline-block

 3.在浮动元素下加<div 

class="clear"></div>

 .clear{ 

height:0px;font-size:0;clear:both;}

*/

</style>

</head>

<body>

<div 

class="box">

 <div class="div"></div>

 <div 

class="clear"></div>

</div>

</body>

</html>

4.在浮动元素下加<br clear="all">

<!DOCTYPE HTML>

<html>

<head>

<meta 

http-equiv="Content-Type" content="text/html; 

charset=utf-8">

<title>无标题文档</title>

<style>

.box{ 

width:300px;margin:0 auto;border:10px solid #000;}

.div{ 

width:200px;height:200px;background:red;float:left;}

/*

 清浮动

 1.给父级也加浮动

 2.给父级加display:inline-block

 3.在浮动元素下加<div 

class="clear"></div>

 .clear{ 

height:0px;font-size:0;clear:both;}

 4.在浮动元素下加<br 

clear="all"/>

*/

</style>

</head>

<body>

<div 

class="box">

 <div class="div"></div>

 <br 

clear="all"/>

</div>

</body>

</html>

5.给浮动元素父级加{zoom:1;}
:after{content:"";display:block;clear:both;}

<!DOCTYPE HTML>

<html>

<head>

<meta 

http-equiv="Content-Type" content="text/html; 

charset=utf-8">

<title>无标题文档</title>

<style>

.box{margin:0 

auto;border:10px solid #000;}

.div{ 

width:200px;height:200px;background:red;float:left;}

.clear{zoom:1;}

.clear:after{content:""; 

display:block;clear:both;}

/*

 清浮动

 1.给父级也加浮动

 2.给父级加display:inline-block

 3.在浮动元素下加<div 

class="clear"></div>

 .clear{ 

height:0px;font-size:0;clear:both;}

 4.在浮动元素下加<br 

clear="all"/>

 5. 给浮动元素的父级加{zoom:1;}

 :after{content:""; 

display:block;clear:both;}

 **在IE6，7下浮动元素的父级有宽度就不用清浮动

 haslayout 根据元素内容的大小 或者父级的父级的大小来重新的计算元素的宽高

 display: inline-block

 height: (任何值除了auto)

 float: (left 或 right)

 width: (任何值除了auto)

 zoom: (除 normal 外任意值) 

*/

</style>

</head>

<body>

<div class="box 

clear">

 <div 

class="div"></div>

</div>

</body>

</html>

6.给浮动元素父级加overflow:auto;

<!DOCTYPE HTML>

<html>

<head>

<meta 

http-equiv="Content-Type" content="text/html; 

charset=utf-8">

<title>无标题文档</title>

<style>

.box{ 

width:300px;border:1px solid #000;overflow:auto;}

.div1{ 

width:260px;height:400px;background:Red;float:left;}

</style>

</head>

<body>

<div 

class="box">

 <div 

class="div1"></div>

</div>

</body>

</html>

html清除浮动的6种方法示例的更多相关文章

  1. CSS读书笔记（3）---清除浮动的几种方法

    浮动元素容易造成页面错位现象.下面说说关于清除浮动的几种方法. 首先.先创建一个浮动导致错位的页面. <!DOCTYPE html> <html lang="en" ...

  2. [Web 前端] 018 css 清除浮动的四种方法

    清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...

  3. CSS 清除浮动的4种方法

    此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景.<style type=”text/css”> <!– *{margin:0;padding:0;} body{font: ...

  4. CSS 清除浮动的四种方法

    在实际项目中,我们经常会用到float属性来对页面进行布局.当使用float时,意味着该元素已经脱离了文档流,相当于浮于文档之上,不占据空间.但是针对兄弟元素为文字内容时,会占据一定空间,从而产生文字 ...

  5. css清除浮动的几种方法整理

    四种清除浮动方法如下: 1.使用空标签清除浮动.空标签可以是div标签,也可以是P 标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签 清除浮动,并为其定义CSS代码:cle ...

  6. 前端布局常见IE6 bug的解决方法，清除浮动的几种方法以及各自的优缺点

    相信有很多前端的朋友再布局的时候经常面对IE6咬牙切齿,尤其是刚刚入行的朋友,在这里给大家一点常见问题的解决方案,希望对大家有所帮助 1)png24位的图片在iE6浏览器上出现背景,解决方案是做成PN ...

  7. 活学活用，CSS清除浮动的4种方法

    清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...

  8. css清除浮动的8种方法以及优缺点

    浮动会使当前标签产生上浮的效果,同时会影响到前后的标签.父级标签的位置及width height 属性.而且同样的代码,在各种浏览器中效果可能不同,这样让清除浮动更难了.清除浮动引起的问题有很多的方法 ...

  9. 转载 | float 清除浮动的7种方法

    什么叫浮动:浮动会使当前标签脱离文档流,产生上浮的效果,同时还会影响周边元素(前后标签)及父级元素的位置和width,height属性.下面用一个小例子来看一看浮动的全过程:1.首先我们新建一个网页, ...

随机推荐

  1. SQLServer如何手动设置id值（主键）的自动增长

    近期做东西,用到了对SQLServer数据库的操作.好吧,确实好久没看了,对这个数据库陌生到了极点,连最简单的如何设置一个id主键,让它随着插入数据的增多,自动增长id值的设置都忘记了,网上查了一下, ...

  2. web跨域问题解决方案

    在前端开发及调试过程中总能遇到浏览器报如下错误: Response to preflight request doesn't pass access control check: No 'Access ...

  3. DQL 数据查询语言 select

    1.select 1.select 单独使用 (1) 查询数据库的参数 查看端口: select @@port; 查看数据路径 select @@datadir; (2)调用内置函数 查看当前库 se ...

  4. 10 个轻松学会 CSS3 的优秀在线资源

    本文包揽 CSS 的所有关键点,并且引入了最新的 CSS3 版本.这个先进的技术提供超级多的新标签和属性,使得 Web 设计构建创新更简单,帮助开发者创建具有新趋势,带有漂亮布局的 Web 页面.随着 ...

  5. HBase1.0.0 实现数据增删查

    HBase1.0.0 即Hadoop 2.6 采用maven 的方式实现HBase数据简单操作 import java.io.IOException; import java.util.ArrayLi ...

  6. delphi文件后缀全解

    delphi文件后缀全解 1. 项目文件(.dpr):Delphi项目文件,用于保存窗体.单元等的信息,以及程序运行的初始化代码等,这种文件实际上包含了Pascal源代码. 2. 单元文件(.pas) ...

  7. [已解决]报错:execjs._exceptions.ProgramError: ReferenceError: window is not defined

    问题: execjs._exceptions.ProgramError: ReferenceError: window is not defined 解决: 定义一个就行 var window = { ...

  8. python调用tushare获取A股上市公司管理层人员信息

    接口:stk_managers 描述:获取上市公司管理层 注:tushare模块下载和安装教程,请查阅我之前的文章 积分:用户需要2000积分才可以调取,具体请参阅本文最下方积分获取办法 输入参数 名 ...

  9. 【HDOJ】P5056 Boring count

    题目意思是给你一个字符串和K,让你求其中有多少个字串中每个字母的出现次数不超过K次,可以等于 题目意思是很简单的,写起来也很简单,不过就是注意最后要是long long要不WA了,555~ #incl ...

  10. lombok @Builder实现原理

    public class Person { private Person(Builder builder) { name = builder.name; age = builder.age; } pr ...