`
conkeyn
  • 浏览: 1522824 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

clear在CSS中的妙用

    博客分类:
  • CSS
阅读更多

在DIV + CSS设计网页中,经常需要设置多个DIV并列排列,往往是使用float:left或float:right来实现,但问题出现了,当前面并列的多个 DIV总宽度不足100%,下面的的DIV就很可能向上提,和上一行的并列的DIV在同一行,这不是我们想要的结果。使用Clear属性正好可以解决这一 问题,下面引用帮助的介绍:

CSS clear属性

Image and text elements that appear in another element are called floating elements. The clear property sets the sides of an element where other floating elements are not allowed.
图片和文字元素出现在另外元素中,那么它们(图片和文字)可称为浮动元素(floating element)。使用clear属性可以让元素边上不出现其它浮动元素。

Note: This property does not always work as expected if it is used along with the "float" property.
注意: 当这个属性随着"float"属性一起使用的话,那么结果可能会不尽如人意

Inherited: No
继承性:

可用值

 

描述
left No floating elements allowed on the left side
不允许元素左边有浮动的元素
right No floating elements allowed on the right side
不允许元素的右边有浮动的元素
both No floating elements allowed on either the left or the right side
元素的两边都不允许有浮动的元素
none Allows floating elements on both sides
允许元素两边都有浮动的元素

 

举例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.LeftText{
   margin: 3px;
   float: left;
   height: 180px;
   width: 170px;
   border: 1px solid #B1D1CE;
   background-color: #F3F3F3;
}

.FootText{
   height: 180px;
}

.Clear
{
   clear:both;
}
</style>
</head>

<body>
<div class="LeftText">区块1</div>
<div class="LeftText">区块2</div>
<div class="Clear"></div>
<div class="FootText">区块3</div>
</body>
</html>

 代码说明:

如果没有Clear这一层,“区块3”会紧接区块2并列在同一行。
加了Clear这一层后,会把上面的浮动DIV的影响清除,使其不至影响下面DIV的布局

分享到:
评论

相关推荐

    css手册 css帮助字典 css帮手

    在CSS 2.0中,有以下几种选择器: - 类选择器(.class):通过类名来选中元素。 - ID选择器 (#id):通过元素的唯一ID来选中元素。 - 标签选择器 (tagname):根据元素的标签名选中元素。 - 属性选择器:根据元素...

    css2.0手册 css2.0手册

    《CSS2.0手册》是Web开发者不可或缺的参考资料,它详细阐述了CSS2.0规范中的各种特性,帮助我们理解并...通过深入学习并实践手册中的内容,我们可以更好地理解和运用CSS2.0,从而创建出更具视觉吸引力和功能性的网站。

    css常用代码大全(html+css代码).pdf

    在“CSS常用代码大全(html+css代码).pdf”中,我们可以看到一系列常用的CSS代码及其用法。 首先,关于文本设置,`font-size`用于定义文本的字号,`font-style`可以设置文本的斜体,如`italic`或`normal`,`font-...

    经典的CSS面试题(含答案)

    在CSS(层叠样式表)领域,面试题通常涵盖了各种概念、技巧和最佳实践,旨在评估候选人的基础知识、问题解决能力和实践经验。以下是一些经典的CSS面试题及其详细解答: 1. **什么是CSS?** CSS(Cascading Style ...

    CSS中文手册 2.0

    这份手册将帮助读者全面掌握CSS 2.0的规范,理解其工作原理,并能够在实际项目中灵活运用。通过学习,你可以创建出美观、响应式的网页,提升用户体验。随着CSS技术的发展,不断学习新的版本和特性也非常重要,但理解...

    Div+CSS 样式的使用演示

    CSS在网页设计中的重要性不言而喻,它使我们可以将样式与内容分离,提高代码可读性和重用性。在Div+CSS布局中,我们可以设置div的属性,如宽度、高度、边距、填充、背景色、边框等。例如,我们可以用以下CSS代码定义...

    CSS 2.0 中文手册.rar_css_中文手册

    10. 多列布局(multi-column layout):初步引入了列的概念,但不完善,后续在CSS3中得到加强。 **三、CSS 2.0的浏览器兼容性** 虽然CSS 2.0在2001年发布,但不同浏览器对它的支持程度各不相同。尤其是IE浏览器在...

    CSS clear属性给float带来哪些影响

    CSS clear属性是专门设计用来控制元素是否可以出现在浮动元素的旁边或下方。它在处理浮动布局时显得尤为重要,因为它能够解决...在实际开发中,理解并运用好clear属性,可以帮助开发者构建更加稳定和可预测的网页布局。

    div+css案例,网页设计

    在"div+css案例"这个压缩包中,我们可以预期找到一系列示例文件,展示了如何使用Div和CSS创建网页布局。这些案例可能包括以下内容: 1. **基本布局**:使用Div实现网格系统,例如两栏或三栏布局,展示如何通过CSS...

    css样式 特殊效果

    在CSS3中,`border-radius`属性的引入使得我们可以轻松地为元素添加圆角,从而告别了过去用图片切片来实现圆角的繁琐过程。`border-radius`接受数值参数,可以设置为像素或其他长度单位,例如`border-radius: 20px;`...

    css多浏览器兼准则

    综上所述,实现CSS在多浏览器的兼容性是一个涉及多个方面的工作,包括理解浏览器差异、合理运用技术策略以及不断学习和更新知识。只有这样,我们才能确保我们的网站在各种环境下都能提供一致且良好的用户体验。

    cssdiv

    6. **浮动与清除**:讨论float属性和clear属性,以及它们在创建多列布局中的应用。 7. **CSS3新特性**:介绍CSS3的新功能,如渐变、阴影、圆角、过渡、动画、多列布局等,以及如何使用媒体查询实现响应式设计。 8....

    别具光芒css+div

    《别具光芒css+div》是一本面向有一定HTML基础的学习者,旨在深入解析CSS与DIV在网页设计中的应用的入门级教程。CSS(Cascading Style Sheets)是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的...

    css-dictionary(CSS常用英语词汇详解)

    在CSS中用于表示颜色或图像的透明程度,尤其是在处理颜色的RGBA模式时。 - **Anchor**: 锚点。HTML中的`&lt;a&gt;`标签即代表此单词的缩写,用于创建超链接。 - **Arrow**: 箭头。在CSS中,可以通过`::before`或`::after`...

    详解CSS中clear:left/right的用法

    在CSS布局中,`clear`属性是一个非常重要的概念,它用于控制元素如何处理周围的浮动元素。通常,我们在处理浮动元素(使用`float`属性)时,可能会遇到元素的位置受到浮动元素影响的情况。`clear`属性正是用来解决这...

    div+css博客

    8. **浮动与清除**:在旧版布局中,可能会使用`float`属性来创建多列布局,而`clear`则用于处理浮动元素产生的问题。 9. **CSS预处理器**:为了提高代码的可维护性和模块化,开发者可能使用Sass、Less等CSS预处理器...

    DIV+CSS彻底研究书中全部原代码

    在实践中,开发者会运用CSS来隐藏、定位或调整这些弹窗的样式,以优化用户体验。 在学习"DIV+CSS彻底研究"的过程中,读者可以了解到: 1. **Div布局基础**:如何使用Div创建网格系统,以及如何通过CSS控制Div的...

    CSS3默认样式

    ### CSS3默认样式的解析与应用 #### 一、引言 在网页设计与开发过程中,CSS(层叠样式表)扮演着至关重要的角色。...在实际开发中,开发者可以根据具体需求灵活运用这些样式,从而提升网站的用户体验和整体质量。

    Div+CSS资料大全

    【Div+CSS】是网页设计领域中的一种布局技术,它结合了HTML的Div元素和CSS(Cascading Style Sheets)样式表,用于实现更灵活、更精确的...在实际应用中,不断学习和实践,才能更好地理解和运用这一强大的设计工具。

Global site tag (gtag.js) - Google Analytics