页面布局:div之float,clear特性

2024-03-04 05:18

本文主要是介绍页面布局:div之float,clear特性,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:

HTML4STRICT代码:
  1. <div style="width:200px;border:1px solid red;">
  2. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV </div>
  3. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV </div>
  4. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV </div>
  5. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV </div>
  6. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV </div>
  7. </div>


显示的结果如下:

P_1160709253_0.gif
容器DIV没有被撑开

大家可以看到,作为外部容器的边框为红色的DIV,没有被撑开。这是因为内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
我们想让外部容器的DIV随着内部DIV增多而增加高度,要怎么解决呢?

以前我都是用这样的方法来解决:
HTML4STRICT代码:
  1. <div style="width:200px;border:1px solid red;">
  2. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV </div>
  3. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV </div>
  4. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV </div>
  5. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV </div>
  6. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV </div>
  7. <div style="clear:both;"> </div>
  8. </div>


显示的结果如下:

P_1160709321_0.gif
显示正常了

我们看到,在容器DIV内要显示出来的float:left的所有的DIV之后,我们添加了这样的一个DIV: <div style="clear:both"></div>    。这样,其实就在最后增加了clear的动作。

但是,我总觉得,这么多加一个DIV有点不妥。一是多了一个没有意义的DIV,二是在用dojo做Drag & Drop的时候,由于这个DIV是容器DIV的一个字节点,如果这个节点被移动,则会造成排版上的Bug:如果要显示的蓝框的DIV被移到这个DIV之后,则因为clear:both,它会被强制换一行显示。所以,我一直在寻找更好的解决办法。

昨天在无数次的询问了Google大仙后,我终于找到了 How To Clear Floats Without Structural Markup 这篇文章,找到了解决的办法。

首先设置这样的CSS:
CSS代码:
  1. .clearfix :after {
  2. content: ".";
  3. display: block;
  4. height: 0;
  5. clear: both;
  6. visibility: hidden;
  7. }


然后,我们再修改原来的HTML代码,让外部的容器DIV来使用这个CSS:
HTML4STRICT代码:
  1. <div style="width:200px;border:1px solid red;" class="clearfix">
  2. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV </div>
  3. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV </div>
  4. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV </div>
  5. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV </div>
  6. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV </div>
  7. </div>


在Firefox里测试一下,哈哈,这样做的确很有效,显示正常,而且dojo的 Drag & Drop 也不会有问题了。原来,这个clearfix的CSS使用了after这个伪对象,它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为隐藏。这样就达到了撑开容器的目的啦。

但是,在文章中说,Windows IE并不支持这样做。所以要让IE也完美显示,则必须在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。CSS如下:
CSS代码:
  1. .clearfix :after {
  2. content: ".";
  3. display: block;
  4. height: 0;
  5. clear: both;
  6. visibility: hidden;
  7. }
  8. /* Hides from IE-mac \*/
  9. * html .clearfix { height: 1%; }
  10. /* End hide from IE-mac */


因为转义字符"\",Mac IE浏览器会忽略掉这段Hack,但Windows IE不会,它会应用 * html .clearfix {height: 1%;} 来达到撑开DIV容器的目的(貌似Mac IE没有办法解决这个问题,不过幸好用户数量是在是太少了,Safari支持就可以了:p)。

测试一下,果然大功告成。

P_1160709321_0.gif

这篇关于页面布局:div之float,clear特性的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/772104

相关文章

新特性抢先看! Ubuntu 25.04 Beta 发布:Linux 6.14 内核

《新特性抢先看!Ubuntu25.04Beta发布:Linux6.14内核》Canonical公司近日发布了Ubuntu25.04Beta版,这一版本被赋予了一个活泼的代号——“Plu... Canonical 昨日(3 月 27 日)放出了 Beta 版 Ubuntu 25.04 系统镜像,代号“Pluc

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

Flutter监听当前页面可见与隐藏状态的代码详解

《Flutter监听当前页面可见与隐藏状态的代码详解》文章介绍了如何在Flutter中使用路由观察者来监听应用进入前台或后台状态以及页面的显示和隐藏,并通过代码示例讲解的非常详细,需要的朋友可以参考下... flutter 可以监听 app 进入前台还是后台状态,也可以监听当http://www.cppcn

MySQL表锁、页面锁和行锁的作用及其优缺点对比分析

《MySQL表锁、页面锁和行锁的作用及其优缺点对比分析》MySQL中的表锁、页面锁和行锁各有特点,适用于不同的场景,表锁锁定整个表,适用于批量操作和MyISAM存储引擎,页面锁锁定数据页,适用于旧版本... 目录1. 表锁(Table Lock)2. 页面锁(Page Lock)3. 行锁(Row Lock

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网

Rust中的Drop特性之解读自动化资源清理的魔法

《Rust中的Drop特性之解读自动化资源清理的魔法》Rust通过Drop特性实现了自动清理机制,确保资源在对象超出作用域时自动释放,避免了手动管理资源时可能出现的内存泄漏或双重释放问题,智能指针如B... 目录自动清理机制:Rust 的析构函数提前释放资源:std::mem::drop android的妙

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》:本文主要介绍了三种禁止HTML页面滚动的方法:通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点,详细内容请阅读本文,希望能对你有所帮助... 在前端开发中,禁止htm

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

五大特性引领创新! 深度操作系统 deepin 25 Preview预览版发布

《五大特性引领创新!深度操作系统deepin25Preview预览版发布》今日,深度操作系统正式推出deepin25Preview版本,该版本集成了五大核心特性:磐石系统、全新DDE、Tr... 深度操作系统今日发布了 deepin 25 Preview,新版本囊括五大特性:磐石系统、全新 DDE、Tree