最近在学习网站div+css方面的动西,发现很多页面都有很多带有float属性的div块之后会包含一个只含clear属性的div块,但并没有什么内容,一直不得其解,在网站上搜索了一下,认为以下很合情合理,一起同大家分享:
在DIV + CSS设计网页中,经常需要设置多个DIV并列排列,往往是使用float:left或float:right来实现,问题是,当前面并列的多个DIV总宽度不足100%,下面的的DIV就很可能向上提,和上一行的并列的DIV在同一行,这不是我们想要的结果。
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"属性一起使用的话,那么结果可能会不尽如人意
举例
<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>
<div class="LeftText">区块1</div>
<div class="LeftText">区块2</div>
<div class="Clear"></div>
<div class="FootText">区块3</div>
代码说明:
如果没有Clear这一层,“区块3”会紧接区块2并列在同一行。
加了Clear这一层后,会把上面的浮动DIV的影响清除,使其不至影响下面DIV的布局
分享到:
相关推荐
【DIVCSS标准化网页布局】是一种现代网页设计技术,它将内容和样式分离,提高了网页的可维护性和可访问性。`<div>`标签是HTML中的一个区块元素,全称为division,意为“区分”。它作为一个容器,可以包含其他HTML...
2. 空div方法:在浮动元素后添加一个无内容的空div,并设置`clear: both`。 3. `overflow`方法:将父元素的`overflow`属性设置为`auto`或`hidden`,这会让父元素包裹其内部的浮动元素,但要注意可能会无意中触发滚动...
这个问题在前端开发中很常见,尤其是在早期的网页布局设计中。本篇将详细探讨这个问题,并提供解决方案。 首先,我们需要理解`float`的工作原理。`float`属性可以使元素脱离标准文档流,向左或向右移动,直到其边框...
在网页设计中,CSS是控制页面布局和视觉表现的关键工具。以下将详细介绍文档中提到的一些主要CSS属性。 **字体属性**: 1. `font-size`: 用于设置字体大小,可以使用`x-large`、`xx-small`等相对大小,或者使用数值...
- 解决方案:可以通过添加一个具有`clear: both`属性的空`div`来清除浮动,或者使用`overflow: hidden`来包裹浮动元素。 8. **列表元素的默认样式**: - **默认样式差异**:`ul`和`ol`元素在不同浏览器中的默认...
关于DIV设置浮动后无法撑开外部DIV的问题,这是一个在网页布局中非常常见的问题,尤其是对于那些刚接触DIV和CSS布局的设计师来说,这个问题往往令人困惑。理解这个问题需要首先了解CSS中的浮动(float)属性和清除浮动...
- 清除浮动通常使用`clear:both`或创建一个空的div并设置`clear:both`,也可以使用CSS新特性`clearfix`类。 - 防止父级边框塌陷可以通过设置`overflow:hidden`、`display:flex`或使用`clearfix`类等方法。 在实际...
在网页设计中,`DIV+CSS` 是一种常见的布局方式,它通过定义`div`元素的样式来构建页面结构。浮动(`float`)是 CSS 中一个关键的概念,用于实现元素的定位,常用于创建多列布局。然而,浮动元素会脱离正常的文本流...
- **清除浮动属性的使用**:如何在页面中使用`clear`属性。 ### CSS定义文本属性 #### 文本的缩进和对齐 - **段首缩进**:通过`text-indent`属性实现。 - **段首字符下沉与大写**:使用`::first-letter`伪元素。 ...
在浮动的子元素后面添加一个空的div,并设置其clear属性为both,这个div将强制自身不能紧贴前面的浮动元素,从而清除之前的浮动,达到撑开父元素的效果。这种方法虽然简单,但可能会增加额外的HTML标记,影响页面的...
然后在HTML中添加一个带有`.clear`类的空`div`来作为分隔,确保后续元素不会受到影响: ```html <div id="redBlock">博客的左侧</div> <div id="blueBlock">博客的右侧</div> <div class="clear"></div> <div ...
1. **添加额外的空标签**:在所有浮动元素后面添加一个空标签,并为其设置`clear:both`属性。 2. **使用伪元素**:利用`:before`或`:after`伪元素,结合`content`属性和`clear:both`属性清除浮动。 3. **父元素设置...
**添加额外的空元素并使用clear属性**:例如在父元素内部添加一个新的空`<div>`元素,并设置`clear: both;`。 - **适用场景**:适用于不关心HTML结构的简单页面。 2. **使用overflow属性**:对父元素设置`...
- **空元素清除法**:在所有浮动元素后面添加一个空元素,如`<div class="clearfix"></div>`,并设置`clear:both`。这种方法简单但会增加HTML代码。 - **`overflow`属性法**:给父元素设置`overflow:auto`或`hidden`...
在进行网页布局设计时,DIV+CSS是我们常用的技术之一。浮动(float)属性使得页面布局变得更加灵活,但同时也带来一些常见的布局问题。其中一个典型的问题就是当内部的DIV元素使用了float属性后,可能会导致父容器...
另一种方法是在 `div` 内容后面添加一个空的 `div`,并应用 `clear:both` 样式来清除浮动的影响。 ```css /* 清除浮动影响 */ .float_bottom { clear: both; height: 0px; font-size: 0px; padding: 0; margin...
CSS中的`clear`属性用于指定一个元素是否必须位于之前的所有浮动元素的下方。`clearBoth`是`clear`属性的一个值,它表示清除左右两侧的浮动。如果在一个元素上设置了`clear: both;`,那么这个元素的上边沿将会低于...
在非浮动元素前添加一个`clear`类的空元素,用于清除前面浮动元素的影响。 #### 三、总结 以上介绍的是几种常见的CSS兼容性问题及其解决方案。通过这些方法,可以有效地解决不同浏览器之间的差异问题,提高网页的...
独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <...