在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理,例如:
<div style="background:#666;"> <!-- float container -->
<div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>
</div>
此时预览此代码,我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动,而脱离了文档流,导致父元素的height为零。
若将代码修改为:
<div style="background:#666;"> <!-- float container -->
<div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>
<div style="clear:both"></div>
</div>
注意,多了一段清理浮动的代码。这是一种好的CSS代码习惯,但是这种方法增加了无用的元素。这里有一种更好的方法,将HTML代码修改为:
<div class="clearfix" style="background:#666;"> <!-- float container -->
<div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>
</div>
定义CSS类,进行“浮动清理”的控制:
.clearfix:after {
content: ".";
clear: both;
height: 0;
visibility: hidden;
display: block;
} /* 这是对Firefox进行的处理,因为Firefox支持生成元素,而IE所有版本都不支持生成元素 */
.clearfix {
display: inline-block;
} /* 这是对 Mac 上的IE浏览器进行的处理 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;} /* 这是对 win 上的IE浏览器进行的处理 */
.clearfix {display: block;} /* 这是对display: inline-block;进行的修改,重置为区块元素*/
/* End hide from IE-mac */
此时,预览以上代码,会发现即使子元素进行了浮动,父元素float container仍然会将其包围,进行高度自适应。
代码参考:http://www.positioniseverything.net/easyclearing.html
原文地址:http://www.phpweblog.net/rainman/archive/2009/01/05/6268.aspx
分享到:
相关推荐
在本例中,描述了一个不使用`clear:both`标签来实现浮动清理的方法。这种方法涉及到了创建一个特定的CSS类,名为“clearfix”。当这个类被添加到一个浮动元素的父容器上时,可以确保父容器能够根据浮动子元素的高度...
这种方法是最简单的清除浮动方式之一,只需要在浮动元素后面添加一个空的`<p>`标签或者`<div>`标签,并应用`clear:both;`样式即可。 **示例代码**: ```html .clr { clear: both; } <div id="left">Left ...
此文件可能包含浮动元素的示例,如`float:left`和`float:right`,以及清除浮动的技巧,如使用`clear:both`或`overflow:auto`。 5. **multi-backgrounds.zip** - CSS3引入了多重背景图片功能,允许一个元素有多个...
2. 使用伪元素`:after`清除:在CSS中为父元素定义`:after`伪元素,设置`content`、`display:block`和`clear:both`。这在所有现代浏览器中都能正常工作,但在IE6/7中需要额外处理。例如: ```css .after-clear-...
**CSS浮动(float)属性详解** 在现代网页设计中,`DIV CSS`布局是构建响应式和灵活页面结构的关键。其中,CSS的`float`属性扮演着至关重要的角色,它允许元素在页面上浮动,以便创建复杂的布局和多列设计。在传统...
2. 清除浮动:为需要清除浮动影响的元素添加一个空的内联元素,并设置`clear:both`,或者使用CSS伪类`:after`创建一个清理浮动的“块”。 3. 使用Flexbox替换浮动:使用`display:flex`或`display:inline-flex`可以...
为了确保内容不被浮动的导航栏覆盖,我们可以使用CSS的`clear`属性或者`clearfix`类。一个简单的`clearfix`解决方案是为父元素添加伪类`:after`并设置`content: ""`和`clear: both`。 ```css .navbar:after { ...
- **清除浮动**: 为了防止父元素因浮动元素而高度塌陷,需要使用clear属性(如clear:both)来清除浮动影响,确保父元素能够包含所有子元素。 - **浮动与布局**: 浮动常用于创建多栏布局,例如两栏或三栏布局,通过...
CSS 浮动属性 Float 详解 CSS 浮动属性 Float 是一种重要的定位属性,允许页面元素浮动在其他元素旁边。Float 属性可以取四个值:Left、Right、None 和 Inherit。其中,Left 和 Right 分别浮动元素到左边和右边,...
在CSS世界中,`float`和`clear`是两个非常重要的布局属性,它们在网页设计中扮演着不可或缺的角色。这两个属性对于理解盒模型以及创建复杂的网页布局至关重要。在这篇文章中,我们将深入探讨`float`和`clear`的概念...
这种方法是在浮动元素后面添加一个空的HTML元素,如`<div class="clear"></div>`,并在CSS中定义`.clear{clear:both;}`。这样,空元素会占据空间,使得后续元素不再与浮动元素在同一行,从而达到清除浮动的效果。...
这种方法是最直观的一种方式,它通过在浮动元素后面添加一个额外的空标签(通常是`<div>`),并设置`clear:both`来清除浮动的影响。例如: ```css .clear { clear: both; height: 0; font-size: 0; overflow: ...
- `both`: 清除左右两侧的浮动 - `left`: 清除左侧的浮动 - `right`: 清除右侧的浮动 - `none`: 不清除 ##### 4. 内边距(Padding) - **语法**:`padding: padding;` - **描述**:设置元素的内边距。 - **值**...
4. **使用伪元素清除浮动** - 另一种技术是在父元素中使用`:after`伪元素,并利用CSS的 `content` 属性来生成一个内容为空的元素,并设置其 `clear` 属性。然后,将这个伪元素的 `display` 属性设置为 `block` 或 `...
clear:both用来清除浮动这是一直来的印象,但是自己很少会用这个,理解其实也不太正确,今天查查了资料,记录一下 float的脱离文档流 float的原始作用是为了实现文字环绕的作用,可以理解为部分脱离文档流。 CSS中说...
**CSS浮动详解** 浮动(Float)是CSS布局中一种古老但仍然重要的技术,它最初设计用于创建多列布局,如杂志或报纸的版面设计。浮动元素会从当前的正常文档流中移出,向左或向右移动,直到它们的边框接触到包含它们...