网站开发进阶(四十二)巧用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. [ Java学习基础 ] Java构造函数

    构造方法是类中特殊方法,用来初始化类的实例变量,它在创建对象(new运算符)之后自动调用. Java构造方法的特点如下: 构造方法名必须与类名相同. 构造方法没有任何返回值,包括void. 构造方法只 ...

  2. JSONObject转换分析

    net.sf.json.JSONObject采用反射的方式,对POJO进行转换.JSONObject类实现了JSON.Map和Comparable接口,如下: class JSONObject ext ...

  3. sharepoint环境安装

    SharePoint 2013 测试环境安装配置指南 软件版本 Windows Server 2012 标准版 SQL Server 2012 标准版 SharePoint Server 2013 企 ...

  4. 实现鼠标双击(OnGUI)

    void OnGUI()//实现鼠标双击 { Event Mouse = Event.current; if (Mouse.isMouse && Mouse.type == Event ...

  5. 使用word

    同样这也是生活中常用到的办公软件,word本质是一个排版软件,它与一般的编辑器不同的是,它将整个文本分成了一页一页的,当然这也是方便于打印文档. 使用word还是很容易的,一般来说需要注意以下几方面的 ...

  6. spring的@Transactional(rollbackFor=Exception.class)的使用

    Spring框架的事务基础架构代码将默认地只在抛出运行时和unchecked exceptions时才标识事务回滚. 也就是说,当抛出个RuntimeException 或其子类例的实例时.(Erro ...

  7. JAVA 中转义符的理解

    生物信息中有时候会遇到JAVA写的程序,今天阅读源码的时候发现对于正则中的转义符不好理解,后来查资料后终于弄明白了,这里详细说明一下: 字符串的表示有三种方法:1.直接单字符,例如"A&qu ...

  8. OO第一阶段总结

    OO第一阶段总结 一.各次作业程序结构 第一次作业 第一次作业由于初用JAVA,还没有深刻理解面向对象的编程方法,故在编程过程中只用了一个类,一个方法,即完成了相应的程序功能.这必然不是本课程的目的, ...

  9. 建立自己的git服务器

    需求情景 就像金山快盘同步盘那样, 在开发环境windows 10和部署环境Ubuntu server 14.04之间建立同步关系.比如windows端多了一个a.txt文件,你推送后,Ubuntu端 ...

  10. 好IT男不能“淫”-谈IT人员目前普遍存在的“A情绪”

    <如果当道德无法约束你的时候...那么就让对疾病的恐惧来制约你吧> 前言 在写这篇文章前我的心情无比的沉重.几次提笔欲写,几次又未能完成,可是最终让我"奋笔疾书"的原因 ...