网站开发进阶(四十二)巧用clear:both

前言

我们在制作网页中用div+css或者称xhtml+css都会遇到一些很诡异的情况,明明布局正确,但是整个画面却混乱起来了,有时候在IE6下看的很正常的,到ie7或者火狐下看时,就一片混乱了,无论怎么计算,就是不能将排版改正过来。其实,这一切都是浮动搞得鬼,也就是css中的float,要解决情况,就需要使用clear:both了。

CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。

在开发中,从美工MM给你Html代码中,肯定能经常看 <div style="clear:both;"></div>这样的代码,但是你真的能明白它是做什么用的吗?

<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">
TEST DIV
</div>
<div style="clear:both;"></div>
</div>

你可以将此部分代码放到一个HTML页面看看效果,然后在去掉<div style="clear:both;"></div>看一下效果,就知道这句话的作用了。

如图:

(1)有clear:both的:

(2)无clear:both的

这样看,应该就一目了然了:原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开,所以有时候,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。

美文美图

网站开发进阶(四十二)巧用clear:both的更多相关文章

  1. 网站开发进阶(四十四)input type="submit" 和"button"的区别

    网站开发进阶(四十四)input type="submit" 和"button"的区别   在一个页面上画一个按钮,有四种办法: 这就是一个按钮.如果你不写ja ...

  2. 网站开发进阶(三十二)HTML5之FileReader的使用

    HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型 ...

  3. 网站开发进阶(四十三)html中,路径前加“/” 与不加“/”的区别

    网站开发进阶(四十三)html中,路径前加"/" 与不加"/"的区别 前言 <script src="js/downloadify.js&quo ...

  4. Java进阶(四十二)Java中多线程使用匿名内部类的方式进行创建3种方式

    Java中多线程使用匿名内部类的方式进行创建3种方式 package cn.edu.ujn.demo; // 匿名内部类的格式: public class ThreadDemo { public st ...

  5. 网站开发进阶(三十四)编码中的setCharacterEncoding 理解

    编码中的setCharacterEncoding 理解 1.pageEncoding="UTF-8"的作用是设置JSP编译成Servlet时使用的编码. 2.contentType ...

  6. 网站开发进阶(三十五)JSP页面中的pageEncoding和contentType两种属性

    JSP页面中的pageEncoding和contentType两种属性 本文介绍了在JSP页面中经常用的两种属性,分别是pageEncoding和contentType,希望对你有帮助,一起来看. 关 ...

  7. 网站开发进阶(四)Tomcat Server处理一个http请求的过程

    Tomcat Server处理一个http请求的过程 假设来自客户的请求为: http://localhost:8080/wsota/wsota_index.jsp 1) 请求被发送到本机端口8080 ...

  8. BizTalk 开发系列(四十二) 为BizTalk应用程序打包不同的环境Binding

    我们在使用微软或者其他公司提供的BizTalk应用程序MSI包的时候经常会有一个目标环境的选择选项.该选项可以在不同的环境下使用不同的绑定(BizTalk应用程序配置)感觉很高级. 其实这个非常的简单 ...

  9. 网站开发进阶(三十八)Web前端开发规范文档你需要知道的事

    Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...

随机推荐

  1. bzoj2005 NOI2010 方案统计

    2005: [Noi2010]能量采集 Time Limit: 10 Sec  Memory Limit: 552 MBSubmit: 4387  Solved: 2619[Submit][Statu ...

  2. Simpson积分(BZOJ2178)

    lrj的代码常数太大T了QAQ,改了一下. #include <cstdio> #include <cmath> #include <algorithm> usin ...

  3. quartzJob 例子

    KpiOfPoorQualityJob.javapackage com.eastcom_sw.inas.workorder.quartzJob.kpi; import net.sf.json.JSON ...

  4. widows下的进程与服务

    进程: 当程序卡死的时候,我们可以直接通过任务管理器来关闭进程. 服务: 在这个界面,我们可以选择启动或者关闭相关服务,还可以选择服务是否自动启动. 以关闭MySQL自启动服务为例:https://j ...

  5. C语言程序设计第一次作业1

    (一)实验总结 1. 圆面积问题 1:求圆面积和周长 (1)输入圆的半径,计算圆的周长和面积. (2) (3) 2:判断闰年 (1)输入一个四位年份,判断其是否是闰年.闰年的判别条件是该年年份能被4整 ...

  6. python2.7入门---运算符

        已经分享过变量类型的基本概念了,接下来就研究了一下运算符的基础知识.接下来我们就来看一下内容.举个简单的例子 4 +5 = 9 .例子中,4 和 5 被称为操作数,"+" ...

  7. 手写JAVA虚拟机(二)——实现java命令行

    查看手写JAVA虚拟机系列可以进我的博客园主页查看. 我们知道,我们编译.java并运行.class文件时,需要一些java命令,如最简单的helloworld程序. 这里的程序最好不要加包名,因为加 ...

  8. 【阿里聚安全·安全周刊】Google“手枪”替换 | 伊朗中央银行禁止加密货币

    本周七个关键词:Google"手枪"替换丨IOS 漏洞影响工业交换机丨伊朗中央银行禁止加密货币丨黑客针对医疗保健丨付费DDoS攻击丨数据获利的8种方式丨MySQL 8.0 正式版 ...

  9. 独立游戏《Purgatory Ashes》的经验与总结

    1.引子 游戏的灵感萌生于2015年,当时只有一些概念性的设计图. 后来我利用资源商店的素材搭建了最早的原型. 游戏的最终画面: 早期以D.P作为代号进行开发,来源于两个单词的缩写 Devil Pro ...

  10. OpenResty 执行阶段的概念和用途

    主要还是 Nginx 的执行阶段知识了,都是因为 OR 才会那么深刻, 它有些自己的阶段. 主要还是参照 春哥的 Nginx 教程 请多读几遍,如果不清楚nginx的执行阶段就无法充分利用 openr ...