当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-10-07

    本文导语:  使用display:inline-block会出现的情况:1.使块元素在一行显示2.使内嵌支持宽高3.换行被解析了4.不设置的时候宽度由内容撑开5.在IE6,7下步支持块标签由于inline-block属性换行的时候被解析(有间隙)故解决方法使用浮动float:left/righ...

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

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

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

使用浮动时出现的情况:

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

代码如下:





无标题文档

div,span{height:100px;background:red;border:1px solid #000; float:left;}
/*
inline-block
1.使块元素在一行显示
2.使内嵌支持宽高
3.换行被解析了
4.不设置宽度的时候宽度由内容撑开
5.在IE6,7下不支持块标签
浮动:
1.使块元素在一行显示
2.使内嵌支持宽高
3.不设置宽度的时候宽度由内容撑开
*/



div1

div2

span1
span2




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

代码如下:





无标题文档

.box1{ width:100px;height:100px;background:red; float:left;}
.box2{ width:200px;height:200px;background:blue; /* float:left;*/}







清浮动的方法:
1.给父级也加浮动(这种情况当父级margin:0 auto;时不居中)

代码如下:





无标题文档

.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}
.div{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动(不居中了)
*/




   






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

代码如下:





无标题文档

.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
*/




   






3.在浮动元素下加


  .clear{ height:0px;font-size:0;clear:both;}但是在ie6下,块元素有最小高度,即当height

    
 
 

您可能感兴趣的文章:

  • HTML网页中的html body onload自动跳转方法介绍及自动跳转代码示例
  • 去除HTML标签删除HTML示例代码
  • HTML网页的Meta Refresh自动跳转方法介绍及Meta Refresh自动跳转代码示例
  • HTML网页中的javaScript自动跳转方法介绍及javaScript自动跳转代码示例 iis7站长之家
  • Html checkbox标签如何设置默认选中以及用js操作checkbox代码示例
  • php删除字符串HTML标签的函数示例
  • html form标签用法(js操作form)介绍及代码示例
  • GridView生成的HTML代码示例对比
  • Web前端设计:Html强制不换行<nobr>标签用法代码示例
  • PHP 动态生成静态HTML页面示例代码
  • HTML网页中的javaScript自动跳转方法介绍及javaScript自动跳转代码示例
  • python使用win32com在百度空间插入html元素示例
  • html5/css3文本阴影(text-shadow)详解及示例
  • jQuery 删除或是清空某个HTML元素示例
  • HTML 5中<address> 标签定义用法详解及几个示例
  • python将xml xsl文件生成html文件存储示例讲解
  • python抓取某汽车网数据解析html存入excel示例
  • java分析html算法(java网页蜘蛛算法示例)
  • java正则表达式解析html示例分享
  • android教程之textview解析带图片的html示例
  • html+ashx 表单提交示例
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • php压缩html(清除换行符,清除制表符,去掉注释标记)
  • java清除html转义字符
  • java命名空间javax.swing.text.html类html.tag的类成员方法: html定义及介绍
  • 基于HTML5的幻灯片 html5slides
  • java命名空间javax.swing.text.html类html.tag的类成员方法: html.tag定义及介绍
  • 基于 KBEngine 的 HTML5 插件 kbengine_html5
  • java命名空间javax.swing.text.html类html.unknowntag的类成员方法: html.unknowntag定义及介绍
  • 让 IE 支持 HTML5 html5shim
  • java命名空间javax.swing.text.html类htmleditorkit.inserthtmltextaction的类成员方法: html定义及介绍
  • HTML文档格式化工具 HTML Tidy
  • java命名空间javax.swing.text.html类html的类成员方法: getallattributekeys定义及介绍
  • HTML5 在线工具 html5demos
  • java命名空间javax.swing.text.html.parser类dtd的类成员方法: html定义及介绍
  • 框架网页中如何使用sendredirect(a.html),使得a.html不显示在框架中,是整页显示!
  • java命名空间javax.swing.text.html类html.tag的类成员方法: comment定义及介绍
  • Sar数据转HTML Sar2html
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: color定义及介绍
  • 关于editplus的使用,编译完生成.class后,我又编写了html来执行applet,将其保存,如何经ie解释打开(直接在editplus上操作)不是显示html语言呀
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: vlink定义及介绍
  • python实现html转ubb代码(html2ubb)
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: rel定义及介绍
  • asp.net去除HTML标签删除HTML小例子
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: src定义及介绍
  • 用正则查找html中有id属性的html标签


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3