`
stenlylee
  • 浏览: 260618 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

CSS:浮动清理,不使用 clear:both标签

阅读更多

在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理,例如:

<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

分享到:
评论

相关推荐

    CSS 浮动清理,不使用 clear:both标签

    在本例中,描述了一个不使用`clear:both`标签来实现浮动清理的方法。这种方法涉及到了创建一个特定的CSS类,名为“clearfix”。当这个类被添加到一个浮动元素的父容器上时,可以确保父容器能够根据浮动子元素的高度...

    css别忘记清除浮动clear:both

    这种方法是最简单的清除浮动方式之一,只需要在浮动元素后面添加一个空的`&lt;p&gt;`标签或者`&lt;div&gt;`标签,并应用`clear:both;`样式即可。 **示例代码**: ```html .clr { clear: both; } &lt;div id="left"&gt;Left ...

    css:web设计艺术精髓

    此文件可能包含浮动元素的示例,如`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-...

    DIVCSS布局:CSS浮动float属性详解.doc

    **CSS浮动(float)属性详解** 在现代网页设计中,`DIV CSS`布局是构建响应式和灵活页面结构的关键。其中,CSS的`float`属性扮演着至关重要的角色,它允许元素在页面上浮动,以便创建复杂的布局和多列设计。在传统...

    Day06-CSS布局-浮动

    2. 清除浮动:为需要清除浮动影响的元素添加一个空的内联元素,并设置`clear:both`,或者使用CSS伪类`:after`创建一个清理浮动的“块”。 3. 使用Flexbox替换浮动:使用`display:flex`或`display:inline-flex`可以...

    布局:浮动导航栏练习.zip

    为了确保内容不被浮动的导航栏覆盖,我们可以使用CSS的`clear`属性或者`clearfix`类。一个简单的`clearfix`解决方案是为父元素添加伪类`:after`并设置`content: ""`和`clear: both`。 ```css .navbar:after { ...

    CSS2中文参考手册+CSS浮动

    - **清除浮动**: 为了防止父元素因浮动元素而高度塌陷,需要使用clear属性(如clear:both)来清除浮动影响,确保父元素能够包含所有子元素。 - **浮动与布局**: 浮动常用于创建多栏布局,例如两栏或三栏布局,通过...

    CSS浮动属性Float详解 什么是CSS Float?

    CSS 浮动属性 Float 详解 CSS 浮动属性 Float 是一种重要的定位属性,允许页面元素浮动在其他元素旁边。Float 属性可以取四个值:Left、Right、None 和 Inherit。其中,Left 和 Right 分别浮动元素到左边和右边,...

    css 的 float 与clear

    在CSS世界中,`float`和`clear`是两个非常重要的布局属性,它们在网页设计中扮演着不可或缺的角色。这两个属性对于理解盒模型以及创建复杂的网页布局至关重要。在这篇文章中,我们将深入探讨`float`和`clear`的概念...

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

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

    xhtml+css清除浮动的3种方法

    这种方法是最直观的一种方式,它通过在浮动元素后面添加一个额外的空标签(通常是`&lt;div&gt;`),并设置`clear:both`来清除浮动的影响。例如: ```css .clear { clear: both; height: 0; font-size: 0; overflow: ...

    css:字体属性参考大全

    - `both`: 清除左右两侧的浮动 - `left`: 清除左侧的浮动 - `right`: 清除右侧的浮动 - `none`: 不清除 ##### 4. 内边距(Padding) - **语法**:`padding: padding;` - **描述**:设置元素的内边距。 - **值**...

    CSS技术:清除浮动的最优方法.pdf

    4. **使用伪元素清除浮动** - 另一种技术是在父元素中使用`:after`伪元素,并利用CSS的 `content` 属性来生成一个内容为空的元素,并设置其 `clear` 属性。然后,将这个伪元素的 `display` 属性设置为 `block` 或 `...

    深度理解CSS clear:both的使用

    clear:both用来清除浮动这是一直来的印象,但是自己很少会用这个,理解其实也不太正确,今天查查了资料,记录一下 float的脱离文档流 float的原始作用是为了实现文字环绕的作用,可以理解为部分脱离文档流。 CSS中说...

    CSS 浮动.pdf

    **CSS浮动详解** 浮动(Float)是CSS布局中一种古老但仍然重要的技术,它最初设计用于创建多列布局,如杂志或报纸的版面设计。浮动元素会从当前的正常文档流中移出,向左或向右移动,直到它们的边框接触到包含它们...

Global site tag (gtag.js) - Google Analytics