我们在Css+Div布局学习(一)—Div布局基础这篇文章里面讲解了基本的布局方法,Footer内有clear:both;属性就一句带过了,事后想了一下对于清理还是有些话要讲清楚的。那我就开辟一篇专门讲一下。
还是使用上一篇的布局事例来说明问题更加的简单:
Masthead
Sidebar_a
Sidebar_b
Content
Footer
这个布局的Css复习一下:
- #Masthead
- {
- background-color:#CCCCCC;
- margin-bottom:10px;
- }
- #Sidebar_a
- {
- float:left;
- width:25%;
- margin-bottom:10px;
- background-color:#3399CC;
- }
- #Sidebar_b
- {
- float:right;
- width:25%;
- margin-bottom:10px;
- background-color:#33ff33;
- }
- #Content
- {
- margin-bottom:10px;
- height:150px;
- background-color:#ff3366;
- }
- #Footer
- {
- clear:both;
- 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` 视频教程中,他可能详细讲解了如何创建浮动布局,包括设置 `div` 的宽高、设置 `float` 属性、清理浮动(clear floats)以防止父元素高度塌陷,以及如何使用媒体查询进行响应式设计。...
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元素用于构建网页的结构框架,它是一个块级元素,可以包含...
在网页设计与开发领域,DIV+CSS布局方法是构建网站时常用的技术之一。然而,不同的浏览器由于其内核差异及版本更新速度不一,常常导致同样的代码在不同浏览器下呈现的效果各异,尤其是对于老旧的IE系列浏览器(如IE6...
1. 使用浮动布局:早期的网页布局常用浮动(`float`)实现,但有其局限性,如需要清理浮动(`clear:both`)来避免父元素塌陷。 2. 定位(`position`)属性:通过`static`、`relative`、`absolute`和`fixed`四种定位...
在CSS布局中,div元素是常用的布局容器,用于构建网页结构。本文将深入探讨在CSS布局中关于div的两个重要知识点:overflow处理和float属性的影响。 首先,我们来看第一点,当一个大div(父div)设定有固定的宽度和...
10. **清理浮动**:由于浮动可能导致父元素高度塌陷,我们需要使用`clear`属性或者额外的`clearfix`类来处理这个问题。 在实际操作中,你可以打开提供的“简单的网页制作案例”文件,通过查看和编辑CSS代码,观察它...
在网页设计中,`div+css`是一种常见的布局方式,它可以帮助我们构建结构清晰、样式独立的页面。然而,由于不同浏览器对CSS的解析和实现存在差异,这导致了跨浏览器兼容性问题。针对`IE6`、`IE7`、`IE8`、`IE9`以及`...
例如,一个`div`内的图片宽度被设置为超过100%,如果没有适当的清理方式,可能导致页面布局出现意料之外的结果。 - 解决方案:可以使用`clear`属性来清除浮动效果。例如,如果一个元素内的图片被设置为向右浮动,...
- **使用Flexbox或Grid布局**:现代CSS布局模型如Flexbox和Grid提供了更简洁的方法来处理浮动元素的布局问题。 通过运用以上技巧,开发者可以有效地解决CSS在IE和Firefox等不同浏览器之间的兼容性问题,提高网页的...
这种方法是在浮动元素后面添加一个空的HTML元素,如`<div class="clear"></div>`,并在CSS中定义`.clear{clear:both;}`。这样,空元素会占据空间,使得后续元素不再与浮动元素在同一行,从而达到清除浮动的效果。...
在CSS布局中,`clear` 属性用于控制元素如何处理周围的浮动元素。当我们谈论 `clear:left` 和 `clear:right` 时,这是关于如何避免一个元素与左侧或右侧的浮动元素相邻的问题。这个属性通常用来解决浮动元素对周围非...
#### 二、CSS垂直居中问题 **问题描述**:在进行布局设计时,经常会遇到元素垂直居中的需求。但在实际操作中发现,对于一个设置了`vertical-align: middle`的`div`,其内部的文字或图片无法实现真正的居中显示。 **...
在Dreamweaver中设置div标签实现左右并排,是一项...同时,建议读者关注并实践更多CSS布局技巧,如使用margin属性调整并排元素之间的间距,以及应用clear属性来处理元素后的清理问题,进一步丰富网页设计的视觉效果。
在CSS布局中,浮动元素(float)经常被用来创建多列布局或使内容环绕图片。然而,浮动元素可能会导致父容器高度塌陷,即父容器无法自动扩展到包含所有浮动子元素的高度。为了解决这个问题,我们需要使用“清除浮动”...
在网页布局设计中,将两个`div`元素放置在同一行并避免它们自动换行是一项常见的需求。这通常涉及到CSS(层叠样式表)中的布局技术。以下是对标题和描述中所述知识点的详细解释: ### 方法一:使用浮动(Float) *...
浮动(float)常用于创建多列布局,`clear`属性用于处理浮动元素的布局问题,`clear: both`可以清除两侧的浮动。 定位(positioning)包括相对定位和绝对定位。相对定位是相对于元素原本的位置,而绝对定位则是相...
总的来说,理解并掌握浮动清理是CSS布局中的关键技能。无论是使用`clear:both`还是`clearfix`方法,都可以有效地解决浮动元素导致的父元素高度丢失问题,保持网页布局的稳定性和一致性。在实际开发中,根据项目需求...
#### 二、浮动清理(Clearing Floats) - **ClearFix**: 一种常用的解决浮动元素不闭合导致布局错乱的方法。 ```css .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility:...