`
jamm19860411
  • 浏览: 86911 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

清除浮动

阅读更多
用空标签清除

.clr {clear: both;}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
    <p class="clr"></p>
</div>


使用 overflow 属性

#layout {overflow:auto; zoom:1;}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>


使用 :after (非 IE 浏览器)

#layout:after{
    display: block;
    clear: both; content: "";
    visibility:hidden; height: 0;
}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>
分享到:
评论

相关推荐

    HTML5 清除浮动

    清除浮动是一个解决CSS布局问题的关键技术,特别是当我们在处理浮动元素时。 在CSS中,浮动(float)属性主要用于创建多列布局或让文本环绕图像。当一个元素被设置为浮动,它会脱离正常的文档流,向左或向右移动,...

    css中3种清除浮动方法

    为了解决这个问题,CSS提供了多种清除浮动的方法。本文将详细讲解三种清除浮动的方法。 1. **传统方式:添加额外的 clearing div** 在浮动元素之后,可以添加一个额外的`&lt;div&gt;`并为其设置样式`clear: both;`。这...

    清除浮动和解决margin的塌陷的方法

    浮动的原理 ,介绍清除浮动几种方法。以及margin塌陷的产生和解决margin的塌陷的方法

    清除浮动动态演示.html

    浮动的属性虽然方便使用,但是在使用这种属性时,也存在着一种弊端,那就是当子元素设置了float属性之后,且父元素的宽度没有设置...所以这里我们说的清除浮动,指的是清除子盒子添加浮动效果后造成的父盒子高度塌陷。

    导航条字体加粗 清除浮动 minyout 4.390v

    COME-IN FROM 导航条字体加粗 清除浮动 minyout 4.390v.

    清除浮动示例_xiongxiong.html

    浮动的属性虽然方便使用,但是在使用这种属性时,也存在着一种弊端,那就是当子元素设置了float属性之后,且父元素的宽度没有设置...所以这里我们说的清除浮动,指的是清除子盒子添加浮动效果后造成的父盒子高度塌陷。

    清除浮动.pdf

    解决这个问题,通常需要采用一些技术来“清除浮动”。 1. **清除浮动(Clearing Floats)**: - 最传统的方法是在父容器内部添加一个额外的标签,如`&lt;div class="clear"&gt;&lt;/div&gt;`,并设置`clear: both;`。这种方法...

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

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

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

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

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

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

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

    因此,需要使用清除浮动的技术来解决这一问题。本文档将探讨清除浮动的多种方法,并分析其优缺点,以找出所谓的“最优方法”。 首先,浮动(float)属性是CSS中用于布局的主要属性之一。当元素设置为浮动状态时,它...

    清除浮动.docx

    为了解决这个问题,有多种清除浮动的方法。 1. **传统方法:额外元素清除** 这是最原始的方法,即在父容器内添加一个额外的元素,通常使用`&lt;div class="clear"&gt;&lt;/div&gt;`,并为其设置样式`clear:both`。这样,这个...

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

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

    H5 溢出隐藏和缩略图和清除浮动

    在本话题中,我们将探讨“H5溢出隐藏”、“缩略图”和“清除浮动”这三大关键概念,以及它们在实际网页布局中的应用。 一、H5溢出隐藏 在H5中,“溢出隐藏”是通过CSS来实现的一种布局技巧,用于处理内容超出容器...

    div+css清除浮动

    div+css清除浮动

    清除浮动的几种方法.md

    清除浮动的几种方法.md

    浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么

    我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。 一、清除浮动 还是 闭合浮动 (Enclosing float or Clearing float)? 很多人都已经习惯称之为清除...

    CSS的clear属性清除浮动的基本用法示例

    清除浮动是指通过CSS样式来防止浮动元素对周围元素的影响,确保非浮动元素或后续元素能够正确地在页面上定位,避免内容溢出容器。这通常是为了恢复父容器的正常高度计算,使其能完全包裹住内部的浮动元素。 **使用`...

    css 完美清除浮动的两种解决方案

    为了解决这个问题,我们通常需要“清除浮动”。本文将介绍两种常见的清除浮动的方法:使用`clear:both`和使用伪元素。 1. **使用`clear:both`** 在HTML中,我们可以创建一个空的`div`元素,并为其添加`clear:both`...

Global site tag (gtag.js) - Google Analytics