浮动清理另类方法

最新推荐文章于 2024-09-10 11:20:27 发布
最新推荐文章于 2024-09-10 11:20:27 发布
阅读量411 收藏
点赞数
文章标签： firefox float div 浏览器 html ie

在进行浮动布局时，大多数人都深知，在必要的地方进行浮动清理：

<div style="clear:both;"></div>
Html代码 复制代码
  1. < BR > < div   style = "background:#666;" > < BR > <!-- float container --> < BR >    < div   style = "float:left; width:30%; height:40px;background:#EEE; " > Some Content </ div > < BR > </ div > < BR >    


<div style="background:#666;">

<!-- float container -->

  <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>

</div>


此时预览此代码，我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动，而脱离了文档流，导致父元素的height为零。
若将代码修改为：

Html代码 复制代码
  1. < BR > < div   style = "background:#666;" > < BR >    <!-- float container --> < BR >    < div   style = "float:left; width:30%; height:40px;background:#EEE; " > Some Content </ div > < BR >    < div   style = "clear:both" > </ div > < BR > </ div > < BR >    


<div style="background:#666;">

  <!-- float container -->

  <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>

  <div style="clear:both"></div>

</div>


注意，多了一段清理浮动的代码。这是一种好的CSS代码习惯，但是这种方法增加了无用的元素。这里有一种更好的方法，将HTML代码修改为：

Html代码 复制代码
  1. < BR > < div    class = "clearfix"   style = "background:#666;" > < BR >    <!-- float container --> < BR >    < div   style = "float:left; width:30%; height:40px;background:#EEE; " > Some Content </ div > < BR > </ div > < BR >    


<div  class="clearfix" style="background:#666;">

  <!-- float container -->

  <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>

</div>


定义CSS类，进行“浮动清理”的控制：

Css代码 复制代码
  1. <BR>.clearfix:after {}{<BR>  content:  "." ;<BR>  clear: both;<BR>  height:  0 ;<BR>  visibility: hidden;<BR>  display: block;<BR>}            /* 这是对Firefox进行的处理，因为Firefox支持生成元素，而IE所有版本都不支持生成元素 */<BR>.clearfix {}{<BR>  display: inline-block;     <BR>}            /* 这是对 Mac 上的IE浏览器进行的处理 */<BR>/**//* Hides from IE-mac /*/<BR>* html .clearfix {}{height:  1 %;}        /* 这是对 win 上的IE浏览器进行的处理 */<BR>.clearfix {}{display: block;}        /* 这是对display: inline-block;进行的修改，重置为区块元素 */<BR>/**//* End hide from IE-mac */<BR>   


.clearfix:after {}{

  content: ".";

  clear: both;

  height: 0;

  visibility: hidden;

  display: block;

}            /* 这是对Firefox进行的处理，因为Firefox支持生成元素，而IE所有版本都不支持生成元素 */

.clearfix {}{

  display: inline-block;     

}            /* 这是对 Mac 上的IE浏览器进行的处理 */

/**//* Hides from IE-mac /*/

* html .clearfix {}{height: 1%;}        /* 这是对 win 上的IE浏览器进行的处理 */

.clearfix {}{display: block;}        /* 这是对display: inline-block;进行的修改，重置为区块元素 */

/**//* End hide from IE-mac */


此时，预览以上代码( 删去这种注释 )，会发现即使子元素进行了浮动，父元素float container仍然会将其包围，进行高度自适应。

代码参考：http://www.positioniseverything.net/easyclearing.html

clear元素的margin-top被重置为零，当你使用clear(left & both & right)清理一个浮动元素时，该元素的margin-top会被重置为0。所以为了创建浮动列，并使用footer进行浮动清理时，必须对浮动列（sidebar && content）都指定margin-bottom,最好margin-bottom相同。（Firefox会将margin-top重置0，而IE不重置footer的margin-top）。

例如：
分别在Firefox和IE中运行一下代码，仔细读者会发现页脚（footer）的margin-top在火狐中并没有显示，而在IE中却出现了10像素的上边距。

Html代码 复制代码
  1. < BR > < body > < BR > < div   id = "wrapper" > < BR >      < div   id = "masthead" > < BR >         masthead content goes here < BR >      </ div > < BR >      < div   id = "sidebar" > < BR >         sidebar content goes here < BR >      </ div > < BR >      < div   id = "content" > < BR >         main content goes here < BR >          < br /> < BR >         main content goes here < BR >      </ div > < BR >      < div   id = "footer" > < BR >         footer < BR >      </ div > < BR > </ div > < BR > < BR > </ body > < BR >    


<body>

<div id="wrapper">

    <div id="masthead">

        masthead content goes here

    </div>

    <div id="sidebar">

        sidebar content goes here

    </div>

    <div id="content">

        main content goes here

        <br/>

        main content goes here

    </div>

    <div id="footer">

        footer

    </div>

</div>



</body>


Css代码 复制代码
  1. <BR>body {}{<BR>    margin: 0 ; padding: 0 ;<BR>    background-color:#FFFFCC;<BR>}<BR>#wrapper {}{<BR>    width:800px;<BR>    margin: 0  auto;<BR>}<BR>/**//*Masthead*/<BR>#masthead {}{<BR>    padding:10px;<BR>    background:#FFCC33;<BR>    margin-bottom:10px;<BR>}<BR>/**//*Content*/<BR>#content {}{<BR>    float:left;<BR>    width: 60 %;<BR>    background:#CCCCCC;<BR>}<BR>/**//*Sidebar*/<BR>#sidebar {}{<BR>    float:right;<BR>    width: 36 %;<BR>    background:# 999999 ;<BR>}<BR>/**//*Footer*/<BR>#footer {}{<BR>    clear:both;<BR>    padding:10px;<BR>    background:#FFCC33;<BR>}<BR> 

linric704
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Qt开发经验总结
草上爬的博客
12-02 8169
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
CSS基础之盒子模型及浮动布局
09-03 3253
盒模型      谈到盒模型，有经验的小伙伴一定滚瓜烂熟，无非就是 内容(content)、填充(padding)、边框(border)、边界(margin)； 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。 先上图： 上图清晰的表明了盒模型的具体表现样式； margin外边距+borde
DIV+CSS网页标准化布局（二）之浮动布局
diditong0697的博客
09-15 231
盒模型以及浮动布局 谈到盒模型，有经验的小伙伴一定滚瓜烂熟，无非就是内容(content)、填充(padding)、边框(border)、边界(margin)； 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。 先上图： 上图清晰的表明了盒模型的具体表现样式； ...
3分钟带你认识单日主力清洗路径主要的方法
cfchicom的博客
06-03 253
关于主力清洗的知识和技巧比较多。从资金学的角度看，主力清洗的主要目的是波段的减仓或者说是主力的滚仓。虽然主力的清洗和主力的撤资有很大的区别，但是在实际操作中主力的洗和撤就像涨与跌，常常糅合在一起难分难舍。我们只能通过成交量是否放大，以及资金的流入与流出，或者资金流出的比例，粗略地估算揣摩主力的意图。 单日大跌清洗主要是指在一个交易日内主力大幅打压股价，造成股价走低来清洗浮动筹码。 单日清洗路径主要的方法: (1)一日大跌，成交量假放大或者真缩小。 (2）单日大阴线，高开低走。 (...
RabbitMQ死信队列另类用法之复合死信
awei0130的博客
06-17 202
原文地址：https://www.cnblogs.com/viter/p/10492807.html目录前言1. 什么是 RabbitMQ 死信队列2. 如何创建死信队列3.复合业务进入死信队列4. 处理复合死信5. 消费过程演示结束语演示代码下载 前言 在业务开发过程中，我们常常需要做一些定时任务，这些任务一般用来做监控或者清理任务，比如在订单的业务场景中，用户在创建订单后一段时间内，...
前端开发：css基础知识之盒模型以及浮动布局。
weixin_30776545的博客
06-18 50
前端开发：css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5，他们都会问到同一个问题 浮动是什么东西？ 为什么这个浮动没有效果？ 这个问题楼主已经回答了n遍。今天则是把它写到我的博客中，想知道自己过来翻就好啦 ^_^ 下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型，有经验...
石头扫地机器人T4评测体验：宅男“懒癌”的另类拯救者
JAVAweb学习
06-14 878
作为一名科技宅男，最令小编头痛的两件事莫过扫地和整理房间了。好在这个世界对宅男是友好的，毕竟“懒惰”是科技创新的原动力之一。近几年来，各种各样的扫地机器人层出不穷，其中小米生态链企业石头科技凭借着米家扫地机器人等几款产品，一举成为了家用扫地机器人市场上的一匹黑马。 近期，IT之家编辑部收到了一台来自石头科技的新款扫地机器人T4，这是石头科技的一款全新的扫地机器人产品，售价1999元，预约省300...
android安卓源码海量项目合集打包-1
热门推荐
chenhao0568的专栏
06-11 13万+
下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar │ │ Android 实现 标签 拖动 改变位置.rar │ │ android 流式布局和热门标签.zip │ │ ...
jvm垃圾回收
Town
10-23 980
1.什么是垃圾对象? 1.引用计数法: 使用引用计数法的会产生循环引用的情况, 但是理论上应该被回收的, 但是有没有对象可以对他进行调用., 引用计数法默认引用还是大于0 的,不会被回收. 2.根可达算法 gcroots 定义的 局部变量, 静态变量, 常量, jni指针等等 这些都是 然后从这写变量中间找可达性关系. 如图中所示的: 其中箭号可达的就是不能回收的, 他就是一种链路关系图 java中JVM使用的就是根可达算法 2.垃圾回收算法 1.标记清除 会产生内存碎片, 造成不连续的现象, 大对象无法
前端200道面试题及答案（更新中）
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
面试难点梳理 - JVM
paleatta的博客
03-26 777
视频 100个P的视频，内容重复的一堆，我只能找出这么多感觉有用的，大家自己看的时候注意一下。 随看随记 jvm如何认定两个对象同属于一个类型，必须同时满足下面两个条件： 都是用同名的类完成实例化的。 两个实例各自对应的同名的类的加载器必须是同一个。比如两个相同名字的类，一个是用系统加载器加载的，一个扩展类加载器加载的，两个类生成的对象将被jvm认定为不同类型的对象。 能不能自己写个类叫java.lang.System？ 答案：通常不可以，但可以采取另类方法达到这个需求。 解释：为了不让我们写Syst
java面试题
weixin_40212700的博客
03-10 1032
1、线程 线程创建方式继承Thread类和实现Runable接口，重写run方法 使用callable和future创建线程，使用线程池 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rVathKHe-1583845715739)(https://media.geeksforgeeks.org/wp-content/uploads/threadLifeCycle.j...
前端面试题详解
han_start的博客
08-30 437
浏览器前言 最近正好在找工作，整理一下可能问到的和遇到过的面试题。 HTML HTML语义化标签 HTML5新增的语义化标签有：header、nav、main、article、aside、footer等等。 HTML语义化就是让页面内容结构化，他有以下优点： 易于用户阅读，当用户因网络原因无法加载css或js时，能够让页面呈现清晰的结构。 有利于SEO搜索引擎的抓捕。 方便其他设备解析，比如盲人阅读器根据语义化标签渲染网页。 有利于开发维护，语义化更具可读性，代码更好维护。 HT.
Tomcat服务器安装SSL证书教程
锐成信息racent
09-10 733
现在锐成信息申请一张SSL证书，证书申请成功后，会获取到颁发证书文件（.zip）压缩格式，当中有包含四种证书格式如：Tomcat、Nginx、IIS、Apache；Tomcat服务器上需要用到Tomcat文件夹内的证书。Tomcat服务器安装SSL证书教程，主要包括获取证书、安装证书、重启Tomcat以及测试SSL证书是否安装成功等4大步骤，以下是详细图文教程。Tomcat 支持 PFX 格式和 JKS 两种格式的证书，您可根据您 Tomcat 的版本择其中一种格式的证书安装到 Tomcat 上。
【2024】前端学习笔记1-HTML主体框架-文本标签
最新发布
皮皮的博客
09-10 1106
本文讲了HTML主题框架，标签含义及标题、段落、加粗、斜体、下划线、上标、下标、内置容器、换行等标签的基本使用。
【HTML】置换元素（替换元素）
衣乌安、随笔
09-06 314
● 它的内容不是由元素的标签内的内容决定的，而是由元素的属性决定的。● 可以通过CSS设置宽度和高度。
HTML 基础知识详解与代码示例
weixin_63556308的博客
09-05 1096
用于输出一些特殊的字符，因为有些特殊字符不能直接在网页中显示。默认情况下打开新网页时老网页会关闭，可使用。用于传递参数和数据，使用。
用HTML写一个动态的的电子相册实战详细案例
weixin_47139678的博客
09-05 655
用HTML写一个动态的的电子相册实战详细案例
CSS浮动清除方法及实例详解
本文详细探讨了CSS中清除浮动的重要性及其方法。首先，浮动在CSS中是一个关键概念，它允许元素离开其常规文档流，以便调整布局。W3School定义浮动为元素能够沿水平方向移动，直到遇到边界或者另一个浮动元素。当浮动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值