`

css如何清除浮动

    博客分类:
  • css
阅读更多

css中可以用 clearfix清除浮动

 

实例:

 

<html > 
<head> 
<title> css用clearfix清除浮动实例</title> 
<meta name="generator" content="editplus" /> 
<meta name="author" content="" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
</head> 
<body> 
<style type="text/css"> 
/**//*所有主流浏览器都支持 :after 伪元素。*/ 
.clearfix:after{}{content:".";display:block;height:0;clear:both;visibility:hidden} 
.clearfix{}{*+height:1%;}/**//*不知道有什么用处,不加ie7也没有问题*/ 
.box{}{ background:#111;width:500px; position:relative;} 
.l{}{float:left; background:#333;width:200px; height:100px;} 
.r{}{float:right;background:#666;width:200px; height:200px;} 
.s{}{width:100px; height:100px;background:#999;position:absolute;right:-50px;;} 
</style> 
<div class="box clearfix"> 
<div class="l">left</div> 
<div class="r">right</div> 
<div class="s">absolute</div> 
</div> 
</body> 
</html>  

 

 

参考资料:     css用clearfix清除浮动     http://www.studyofnet.com/news/196.html

 

 

分享到:
评论

相关推荐

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

    ### XHTML + CSS清除浮动的三种方法 在XHTML与CSS页面重构过程中,处理浮动元素是一项关键技术。当元素被设定为浮动后,它们会脱离正常的文档流,并向左或向右移动,直到碰到容器边缘或其他浮动元素。这为布局带来...

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

    CSS清除浮动是为了应对浮动元素对周围元素布局的影响,特别是防止父元素因子元素浮动而高度塌陷的问题。在Web开发中,有多种方法可以清除浮动,以下将详细介绍四种常见的清除浮动的方法。 一、使用带有`clear`属性...

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

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

    div+css清除浮动

    div+css清除浮动

    css清除浮动

    ### CSS清除浮动详解 #### 一、引言 在网页设计与前端开发中,CSS(层叠样式表)是用于定义HTML文档外观的关键技术之一。其中,“清除浮动”是一项非常重要的概念,它解决了布局中常见的一个问题——即由于元素...

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

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

    css 清除浮动的新方法

    在上述文件中介绍了一种新的CSS清除浮动方法,这种方法通过伪元素(:after)来清除浮动,避免了额外的HTML标签。具体实现是在浮动元素的父元素上添加一个clearfix类,然后利用CSS的伪元素来清除浮动,伪元素在文档中...

    浅谈css清除浮动(clearfix和clear)的用法

    本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋。关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法,首先我们先看个例子: XML/HTML Code...

    CSS 清除浮动Clear

    当我们提到“CSS 清除浮动Clear”时,我们实际上是在讨论如何解决由于浮动元素导致的布局问题。 在上述例子中,红色方块通过设置`float: left;`使其浮动到左侧,从而允许蓝色方块与其在同一行。这种布局方式在多列...

    css清除浮动的几种方法以及对应规范说明

    CSS清除浮动是为了处理浮动元素对周围元素布局的影响,特别是防止父元素因浮动元素而高度塌陷。以下是对清除浮动的几种方法及其规范说明的详细解释: 1. **使用`clear:both`** 当一个元素设置`clear:both`时,这个...

    CSS 清除浮动方法大全

    以下是对几种常见的CSS清除浮动方法的详细解释: 1. **伪类`:after`**: 使用CSS的`:after`伪类可以添加一个看不见的元素来清除浮动。通过设置`content: ""`和`clear: both`,这个看不见的元素将强制父元素扩展以...

    最简洁的CSS清除浮动的方法

    CSS清除浮动是指通过CSS代码的编写,解决在布局中由于元素浮动导致的后续元素无法正常包裹浮动元素的问题,从而使得布局的其他部分能够正确地环绕或包裹浮动元素。在早期的CSS布局中,浮动布局是经常使用的一种方式...

    CSS清除浮动方法大全(小结)

    CSS清除浮动是前端开发中常见的一个问题处理方法,它主要针对的是当子元素使用了浮动(float)属性后,无法自动撑开父元素高度的问题。这是因为浮动元素脱离了标准文档流,父元素无法检测到其高度,从而导致布局问题...

    CSS清除浮动方法汇总

    本文将汇总一些常见的CSS清除浮动的方法。 1. **传统clear属性** CSS的`clear`属性用于指定元素是否可以放在浮动元素的旁边。如果设置为`clear:left`,则元素不会出现在左侧有浮动元素的地方;`clear:right`不让...

    css清除浮动的几种方法和示例

    以下介绍几种常见的CSS清除浮动的方法: 1. 使用`clear`属性: 这是最基础的清除浮动方式。通过设置`clear`属性,我们可以指定元素不允许与浮动元素相邻。例如,将`.clr{clear:both;}`应用到元素上,使得这个元素...

    DIV+CSS 清除浮动常用方法总结

    【标题】:深入理解CSS清除浮动的三种常见方法 【描述】:在Web开发中,CSS浮动布局常常用于创建复杂的页面结构,但随之而来的是可能导致的父元素高度塌陷问题。为了解决这一问题,开发者通常会采取清除浮动的策略...

    zcxiaobao#everyday-insist#css清除浮动的几种方法(2020.01.08)1

    分析:清除浮动大致有两种方案:clear、触发 BFC额外标签法: 在浮动元素平级的最后面添加额外元素,例如:&lt;div class="clearfix"&gt;&lt;/d

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

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

Global site tag (gtag.js) - Google Analytics