`
deng131
  • 浏览: 673553 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

清除float浮动三种方法

阅读更多
1:使用空标签清除浮动。我用了很久的一种方法,空标签可以是div标签,也可以是P标签。我习惯用<P>,够简短,也有很多人用<hr>,只是需要另外为其清除边框,但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代码:clear:both。此方法的弊端在于增加了无意义的结构元素。
<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clr{clear:both;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
<p class=”clr”> </p>
</div>


2:使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto,即可!overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决,注意,zoom不符合W3C标准。
<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>


3:使用after伪对象清除浮动。after伪对象非IE浏览器支持,所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;二、content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值设为”.”,但我发现为空亦是可以的。
<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>
分享到:
评论

相关推荐

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

    空 div 方法是使用一个空的 div 元素来清除 Float,而 overflow 方法是使用 overflow 属性来扩展父元素以包含浮动。 Float 属性是 CSS 中非常重要的一部分,掌握 Float 属性可以帮助我们创建复杂的网页布局。但是,...

    浮动float深入了解

    以下是一些清除浮动的方法: 1. **clearfix类**:通过添加一个特殊的类到父元素,使用伪元素(如`::before`或`::after`)并应用`clear:both`或`content:""`和`display:block`。 2. `clear`属性:直接在后续元素上...

    Float(浮动)导致的父容器背景不显示的解决方法

    在网页布局设计中,`Float`(浮动)是一种常见的CSS技术,用于实现元素的定位,如创建多列布局或让文本环绕图片等效果。然而,`Float` 的使用有时会导致父容器的一些意外行为,比如背景颜色无法正常显示,这通常被...

    css中3种清除浮动方法

    本文将详细讲解三种清除浮动的方法。 1. **传统方式:添加额外的 clearing div** 在浮动元素之后,可以添加一个额外的`&lt;div&gt;`并为其设置样式`clear: both;`。这被称为“clearfix”方法。例如: ```html ...

    CSS清除浮动float的三种方法小结

    为了解决这个问题,我们有三种主要的清除浮动(clear float)方法。 1. 添加新元素并应用`clear: both;` 这种方法是在浮动元素之后添加一个额外的空元素,比如`&lt;div class="clear"&gt;&lt;/div&gt;`,然后在CSS中设置`.clear...

    CSS清除浮动_清除float浮动 - DIVCSS5.htm

    具体详细的阐述了css浮动如何解决和浮动产生的原因。

    DIV+CSS布局:CSS浮动float属性详解[归纳].pdf

    Float浮动属性基本释义 float属性的值指出了对象是否及如何浮动。当该属性不等于none时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。 Float浮动属性...

    清理浮动的几种方法

    每种清理浮动的方法都有其适用场景和兼容性考虑。在选择清理浮动的方法时,需要根据项目需求、浏览器兼容性和代码简洁性来综合判断。对于现代浏览器,使用`:after`伪元素和`overflow`属性是比较常见的解决方案,而...

    清除浮动的几种方法PPT学习教案.pptx

    清除浮动的几种方法 清除浮动是指在CSS中,浮动元素脱离文档流,导致父级元素无法自动获取到高度的问题。清除浮动是每一个web前台设计师必须掌握的机能。下面将介绍几种清除浮动的方法: 1. 对父级设置适合的CSS...

    Float浮动与清除浮动

    清除浮动主要有以下几种方法: 1. 给父元素设置固定高度:这种方法简单直接,但适用于高度固定的布局,对于高度自适应的页面则不适用。 2. 使用`overflow`属性:通过设置`overflow: hidden`,可以触发父元素成为BFC...

    浮动属性float的应用源码

    常见的清除浮动方法有: 1. `clear:both`:设置在浮动元素之后的元素不接受来自任何方向的浮动。 2. `clearfix`类:通过伪元素如`:before`和`:after`添加内联样式,使父元素具有包裹浮动子元素的能力,而无需改变...

    CSS清除浮动_2种方法源代码.zip

    本文将详细讲解两种常见的CSS清除浮动的方法,并通过提供的源代码进行实例解析。 ### 方法一:clearfix类 `clearfix` 类是最常用的清除浮动方法之一,它并不需要添加额外的HTML元素,而是利用CSS伪类来解决。这种...

    HTML5 清除浮动

    在提供的`demo.html`文件中,可能包含了这些清除浮动方法的实际示例,通过查看和分析代码,我们可以更深入地理解每种方法的工作原理和适用场景。 总的来说,HTML5在布局方面提供了更多的解决方案,包括新的标签和...

    CSS浮动属性Float详解[收集].pdf

    CSS浮动属性Float是CSS中的一种定位方式,它可以使元素在网页流中浮动,周围的元素可以围绕它排列。浮动元素仍然是网页流的一部分,这与使用绝对定位的页面元素不同。绝对定位的页面元素被从网页流里面移除了。 ...

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

    本文档将探讨清除浮动的多种方法,并分析其优缺点,以找出所谓的“最优方法”。 首先,浮动(float)属性是CSS中用于布局的主要属性之一。当元素设置为浮动状态时,它会向左或向右移动,直到它的外边缘碰到包含框或...

    CSS布局详解浮动属性Float.pdf

    清除浮动的方法包括在元素样式中直接设置`clear: both`,或者使用所谓的“clearfix”类,这是一种无需添加额外HTML元素即可清除浮动的技巧。 浮动的一个常见问题被称为“浮动塌陷”(Floating Collapse)。当一个父...

    CSS布局详解浮动属性Float.docx

    另一个清除浮动的常见方法是使用空`div`,即在浮动元素后面添加一个无内容的`div`并设置`clear: both`,但这通常被认为是一种不那么优雅的解决方案,因为它增加了HTML结构的复杂性。 除此之外,还有其他清除浮动的...

    详解css清除浮动float的七种常用方法总结和兼容性处理

    本文将详细介绍七种常见的CSS清除浮动的方法,并讨论它们的兼容性处理。 1. **添加空div法** 这是最原始的清除浮动方式,通过在浮动元素后面添加一个空的div,并设置`clear:both;height:0;overflow:hidden;`。这种...

Global site tag (gtag.js) - Google Analytics