html清除浮动的6种方法示例

使用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>

赞 (0)

相关推荐

  • css别忘记清除浮动clear:both

    用空标签清除 .clr {clear: both;} <div id="layout">     <div id="left">Left</div>     <div id="right">Right</div>     <p class="clr"></p> </div>使用 overflow 属性 #layout {overfl

  • 一个老外弄的Clearing floats(清除浮动的方法)

    我常用的都是clear:both;方法,如 <div style="clear:both">    <div style="float:left"></div>   <div style="float:right"></div> </div> 今在PlanABC看到另外这种方法,特些记录下来. div.container {  border: 1px solid #00000

  • CSS清除浮动常用方法小结

    常用的清除浮动的方法有以下三种.      此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. Left Right [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 1.使用空标签清除浮动.我用了很久的一种方法,空标签可以是div标签,也可以是P标签.我习惯用<P>,够简短,也有很多人用<hr>,只是需要另外为其清除边框,但理论上可以是任何标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动,并为其定义CSS代码:clear:b

  • 对于IE7、FF、OP清除浮动的最优方法第1/2页

    对于IE7、FF、OP清除浮动的最优方法第1/2页

    在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动,嘿嘿,这个方法不单使用简单,而且FF.OP.IE7都支持,从此可以告别那又长兼容性又差的FF清浮动的方法了. 方法真的很简单,只要为需要清浮动的标签加上overflow这个属性.  css代码 复制代码 代码如下: ul{ list-style:none; height:auto; margin:0;p adding:0; background-color:#436973; } li{ float:left

  • html清除浮动的6种方法示例

    使用display:inline-block会出现的情况: 1.使块元素在一行显示2.使内嵌支持宽高3.换行被解析了4.不设置的时候宽度由内容撑开5.在IE6,7下步支持块标签 由于inline-block属性换行的时候被解析(有间隙)故解决方法使用浮动float:left/right 使用浮动时出现的情况: 1.使块元素在一行显示2.使内嵌元素支持宽高3.不设置不宽高的时候宽度由内容撑开4.换行不被解析(故使用行内元素的时候清除间隙的方法可以使用浮动)5.元素添加浮动,会脱离文档流,按照指定的

  • Oracle查看表结构的几种方法示例代码

    1,DESCRIBE 命令 使用方法如下: SQL> describe nchar_tst(nchar_tst为表名) 显示的结果如下: 名称 是否为空? 类型 ----------------------------------------- -------- ---------------------------- NAME NCHAR(6) ADDR NVARCHAR2(16) SAL NUMBER(9,2) 2,DBMS_METADATA.GET_DDL包 使用方法如下: SQL> S

  • PHP清除缓存的几种方法总结

    PHP清除缓存的几种方法总结

    PHP清除缓存的几种方法总结 现在开发的项目是用tp3.1版本的,在开发过程中我们常常会遇到页面缓存的问题(特别是html的缓存):刷新后还是旧版的数,再刷新下还是旧版数据,慢慢的开始怀疑人生了,哈哈:所以在开发过程中我们又必要每次及时清除缓存. 清除缓存的方法大概有3种(都是实际经历总结): 第一:在项目的配置文件config.php里加入下面两行代码就能避免缓存问题 'TMPL_CACHE_ON' => false,//禁止模板编译缓存 'HTML_CACHE_ON' => false,/

  • Android 在子线程中更新UI的几种方法示例

    本文介绍了Android 在子线程中更新UI的几种方法示例,分享给大家,具体如下: 方式一:Handler和Message ① 实例化一个Handler并重写handlerMessage()方法 private Handler handler = newHandler() { public void handleMessage(Message msg) { // 处理消息 super.handleMessage(msg); switch (msg.what) { case 1: button1.

  • Java 添加Word目录的2种方法示例代码详解

    目录是一种能够快速.有效地帮助读者了解文档或书籍主要内容的方式.在Word中,插入目录首先需要设置相应段落的大纲级别,根据大纲级别来生成目录表.本文中生成目录分2种情况来进行: 1.文档没有设置大纲级别,生成目录前需要手动设置 2.文档已设置大纲级别,通过域代码生成目录 使用工具: •Free Spire.Doc for Java 2.0.0 (免费版) •IntelliJ IDEA 工具获取途径1:通过官网下载jar文件包,解压并导入jar文件到IDEA程序. 工具获取途径2:通过Maven仓

  • vue实现路由懒加载的3种方法示例

    前言 路由懒加载在访问页面的时候非常重要,能够提高首页加载速度,避免出现加载时候白页,如果没有懒加载,webpack打包后的文件会非常大. import按需加载(常用) vue异步组件 webpack提供的require.ensure() 1.import按需加载(常用) 允许将不同的组件打包到一个异步块中,需指定了相同的webpackChunkName. 把组件按组分块 const A = () => import(/* webpackChunkName: "group-A"

  • vue操作dom元素的3种方法示例

    1.原生js操作dom const dom = getElementById('box') 2.vue官方方法:ref vue中的ref是把当前dom元素 " 抽离出来 " ,只要通过 this.$refs就可以获取到 < div class="set" ref="up"> .set是我们要操作的dom对象,它的ref是 up @click="Alert" 给父元素一个点击事件, 接下来我们来编写这个方法 meth

  • Quartz与Spring集成的两种方法示例

    目录 Quartz与Spring集成有2种方式:1.MethodInvokeJobDetailFactoryBean2.JobDetailBean下面分别介绍这两种方式.1.MethodInvokeJobDetailFactoryBean1)创建一个Job类,此类不需要实现任何接口,不需要继承任何类 public class MyJobTest { public void execute(){ System.out.println("正在执行quartz任务的一个方法..."); }}

  • iOS实现转场动画的3种方法示例

    什么是转场动画 在 NavigationController 里 push 或 pop 一个 View Controller,在 TabBarController 中切换到其他 View Controller,以 Modal 方式显示另外一个 View Controller,这些都是 View Controller Transition.在 storyboard 里,每个 View Controller 是一个 Scene,View Controller Transition 便是从一个 Sce

随机推荐