`
liyiye
  • 浏览: 425418 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Css+Div布局学习(二)—清理Clear

CSS 
阅读更多

我们在Css+Div布局学习(一)—Div布局基础这篇文章里面讲解了基本的布局方法,Footer内有clear:both;属性就一句带过了,事后想了一下对于清理还是有些话要讲清楚的。那我就开辟一篇专门讲一下。

还是使用上一篇的布局事例来说明问题更加的简单:

Masthead
Sidebar_a
Sidebar_b
Content
Footer

这个布局的Css复习一下:

  1. #Masthead 
  2. background-color:#CCCCCC
  3. margin-bottom:10px
  4. #Sidebar_a 
  5. float:left
  6. width:25%
  7. margin-bottom:10px
  8. background-color:#3399CC
  9. #Sidebar_b 
  10. float:right
  11. width:25%
  12. margin-bottom:10px
  13. background-color:#33ff33
  14. #Conten
  15. margin-bottom:10px
  16. height:150px
  17. background-color:#ff3366
  18. #Footer 
  19. clear:both
  20. background-color:#ffff00

如果我们去掉#Footer 里面的clear:both; 属性,好像也没有太大的区别。那我们再来看看改变一下布局内Div的高度后会怎么样呢?

Masthead
Sidebar_a
Sidebar_b
Content
Footer:去掉了CLEAR: both;属性哦!

这个布局不好看啊,因为foot这个块跟在Content块的流后面,因此两边的浮动块也会被它包围。(我现在的话也应该是“围绕”在Sidebar_b左面的,因为没有被清理!)

Clear属性有4个值:left、right、both和none;none这个值没有什么好说的,我们一开始清理了Footer的两边,那清理一边会有怎么样的效果呢?

Masthead
Sidebar_a
Sidebar_b
Content
Footer:使用CLEAR:left;属性哦!

有了这几张的效果图,应该很好理解这个属性了。在有两个边栏的情况下,Footer使用Clear:both;是比较稳妥的。

分享到:
评论

相关推荐

    div+css float 布局,适配手机

    在高洛峰老师的 `div+css` 视频教程中,他可能详细讲解了如何创建浮动布局,包括设置 `div` 的宽高、设置 `float` 属性、清理浮动(clear floats)以防止父元素高度塌陷,以及如何使用媒体查询进行响应式设计。...

    CSS网站布局实录 (第二版)PDF版

    1.6.5 学习CSS布局比表格困难吗 1.6.6 CSS布局是否意味着必须手写代码 1.6.7 什么叫网站重构 1.6.8 使用Web标准之后就不再存在兼容性问题了吗 1.6.9 有没有Web标准方面的优秀图书或网站 1.6.10 使用CSS设计只能做出...

    DIV与CSS网页标准化布局

    DIV与CSS布局的核心思想在于,将网页内容的结构与样式分离,从而提高代码的可读性和可维护性,同时也优化了搜索引擎的索引效率。 在DIV与CSS布局中,DIV元素用于构建网页的结构框架,它是一个块级元素,可以包含...

    DIV+CSS解决各浏览器兼容问题

    在网页设计与开发领域,DIV+CSS布局方法是构建网站时常用的技术之一。然而,不同的浏览器由于其内核差异及版本更新速度不一,常常导致同样的代码在不同浏览器下呈现的效果各异,尤其是对于老旧的IE系列浏览器(如IE6...

    教您十天学会CSS网站布局

    1. 使用浮动布局:早期的网页布局常用浮动(`float`)实现,但有其局限性,如需要清理浮动(`clear:both`)来避免父元素塌陷。 2. 定位(`position`)属性:通过`static`、`relative`、`absolute`和`fixed`四种定位...

    CSS div布局需要注意的两点

    在CSS布局中,div元素是常用的布局容器,用于构建网页结构。本文将深入探讨在CSS布局中关于div的两个重要知识点:overflow处理和float属性的影响。 首先,我们来看第一点,当一个大div(父div)设定有固定的宽度和...

    简单的网页制作案例(DIV+CSS完成):华硕电脑

    10. **清理浮动**:由于浮动可能导致父元素高度塌陷,我们需要使用`clear`属性或者额外的`clearfix`类来处理这个问题。 在实际操作中,你可以打开提供的“简单的网页制作案例”文件,通过查看和编辑CSS代码,观察它...

    div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法.pdf

    在网页设计中,`div+css`是一种常见的布局方式,它可以帮助我们构建结构清晰、样式独立的页面。然而,由于不同浏览器对CSS的解析和实现存在差异,这导致了跨浏览器兼容性问题。针对`IE6`、`IE7`、`IE8`、`IE9`以及`...

    css浮动的有关问题

    例如,一个`div`内的图片宽度被设置为超过100%,如果没有适当的清理方式,可能导致页面布局出现意料之外的结果。 - 解决方案:可以使用`clear`属性来清除浮动效果。例如,如果一个元素内的图片被设置为向右浮动,...

    CSS兼容IE和Firefox的技巧集合

    - **使用Flexbox或Grid布局**:现代CSS布局模型如Flexbox和Grid提供了更简洁的方法来处理浮动元素的布局问题。 通过运用以上技巧,开发者可以有效地解决CSS在IE和Firefox等不同浏览器之间的兼容性问题,提高网页的...

    css清除浮动的方法有哪些?.docx

    这种方法是在浮动元素后面添加一个空的HTML元素,如`<div class="clear"></div>`,并在CSS中定义`.clear{clear:both;}`。这样,空元素会占据空间,使得后续元素不再与浮动元素在同一行,从而达到清除浮动的效果。...

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

    在CSS布局中,`clear` 属性用于控制元素如何处理周围的浮动元素。当我们谈论 `clear:left` 和 `clear:right` 时,这是关于如何避免一个元素与左侧或右侧的浮动元素相邻的问题。这个属性通常用来解决浮动元素对周围非...

    最全的CSS浏览器兼容问题

    #### 二、CSS垂直居中问题 **问题描述**:在进行布局设计时,经常会遇到元素垂直居中的需求。但在实际操作中发现,对于一个设置了`vertical-align: middle`的`div`,其内部的文字或图片无法实现真正的居中显示。 **...

    Dreamweaver中div标签怎么设置左右并排?

    在Dreamweaver中设置div标签实现左右并排,是一项...同时,建议读者关注并实践更多CSS布局技巧,如使用margin属性调整并排元素之间的间距,以及应用clear属性来处理元素后的清理问题,进一步丰富网页设计的视觉效果。

    css清除浮动的几种方法和示例

    在CSS布局中,浮动元素(float)经常被用来创建多列布局或使内容环绕图片。然而,浮动元素可能会导致父容器高度塌陷,即父容器无法自动扩展到包含所有浮动子元素的高度。为了解决这个问题,我们需要使用“清除浮动”...

    两个div在同一行且不换行的两种方法

    在网页布局设计中,将两个`div`元素放置在同一行并避免它们自动换行是一项常见的需求。这通常涉及到CSS(层叠样式表)中的布局技术。以下是对标题和描述中所述知识点的详细解释: ### 方法一:使用浮动(Float) *...

    CSS使用学习总结

    浮动(float)常用于创建多列布局,`clear`属性用于处理浮动元素的布局问题,`clear: both`可以清除两侧的浮动。 定位(positioning)包括相对定位和绝对定位。相对定位是相对于元素原本的位置,而绝对定位则是相...

    CSS 清除网页浮动 经验

    总的来说,理解并掌握浮动清理是CSS布局中的关键技能。无论是使用`clear:both`还是`clearfix`方法,都可以有效地解决浮动元素导致的父元素高度丢失问题,保持网页布局的稳定性和一致性。在实际开发中,根据项目需求...

    CSS兼容IE6,IE7,FF的技巧

    #### 二、浮动清理(Clearing Floats) - **ClearFix**: 一种常用的解决浮动元素不闭合导致布局错乱的方法。 ```css .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility:...

Global site tag (gtag.js) - Google Analytics