清除浮动(闭合浮动)的方法

一、在元素后面添加元素清除浮动

  • 添加空的标签来清除浮动:<div style="clear:both | left | right | none“></div>.出现位置要紧挨着浮动元素。缺点 带来多于标签
  • 添加br标签来清除浮动:<br style="clear:left | right | all"> 出现位置要紧挨着浮动元素,缺点:带来多于的标签
  • 使用伪类元素:after为在其元素后面,.clearfix:after{content:".",height:0;visibility:hidden;clear:both}  .clearfix{zoom:1/*for <ie8*/},可能会有空隙
  • 父元素使用overflow:hidden |auto;firefox 出现兼容问题,不建议使用
  • 父元素使用display:table,
  • 父元素一起浮动。

二、分析能解决的根本原因

BFC,它能包含其中的浮动元素,通过overflow,display触发了BFC。关于BFC 我做了篇笔记http://www.cnblogs.com/AliceX-J/p/5221951.html;display:table 没有直接触发BFC ,因为它创建的匿名框表,在这个框中又创建了table-cell这种BFC,间接触发了BFC.

clear的原理:在元素内部有浮动元素,清除浮动后,父元素的高度能能撑开。

时间: 2024-10-07 03:07:33

清除浮动(闭合浮动)的方法的相关文章

【转载】那些年我们一起清除过的浮动demo

返回文章:那些年我们一起清除过的浮动 闭合浮动 与 清除浮动 的区别 .main:很抱歉,现代浏览器中我没能把warp撑高(float:left) .side:我也浮动了(float:left) .footer:我通过设置 clear:both 清除浮动,虽然位置正确了,但是 warp 的高度没变,有些不爽 .main:warp自己闭合浮动了,所以footer不用再清除浮动了(float:left) .side:我也浮动了(float:left) .footer:这次 warp 人品爆发了, 通

css浮动布局,浮动原理,清除(闭合)浮动方法

css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘 3.浮动的生成:使用css属性float:left/right/none 左浮动/右浮动/不浮动(默认) 4.浮动的影响: 不会影响未浮动的块级元素布局,但是会影响内联元素的布局 浮动后的元素可以设置宽度和高度,

清除浮动与浮动闭合

浮动(float)在网页布局中随处可见,通过浮动,我们能很方便地布局,但浮动之后遗留下来太多的问题需要解决,特别是IE6-7 浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么?下面将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手. 一.清除浮动还是闭合浮动 (Enclosing float or Clearing float)? 很多人都已经习惯称之为清除浮动,我也一直这么叫着,但是确切地来说是不准确的.我们应该用严谨的态度来对待代码,也能更好地帮助我们理解开头的三个问题. 1)

关于清除浮动的几种方法

很多人都有研究闭合浮动元素的问题,但是解决方法却不一样,也并不是每一种方法都尽善尽美.闭合浮动元素(或者叫清除浮动)是web标准设计中经常会遇到的一个问题,因此,这里我想总结一下目前经常用到的几种方法,并比较一下他们的易用性和适用环境.如果你有更好的方法不妨提出来大家一起讨论. 问题的提出: 最简单的一种情形就是我们把一个小的.固定宽度的div元素(比如导航.引用等)和其他元素内容一起包含在一个大的div中.比如下面这段代码: <div id="outer"> <di

清除浮动的方法-那些年我们一起清除过的浮动

浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器).也许很多人都有这样的疑问,浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手.一.清除浮动 还是 闭合浮动 (Enclosing float or Clearing float)?很多人都已经习惯称之为清除浮动,以前我也一直这么叫着

论述浮动的原理和浮动带来的影响,并列举常见的闭合浮动的方法。

1.浮动的原理浮动是让某元素脱离标准流,漂浮在标准流之上的一种布局方式.任何元素被设置为浮动元素后,就表明它是块级元素,拥有宽高属性.2.浮动带来的影响1)影响它的兄弟元素的位置一个元素设置了浮动样式后,会影响它的兄弟元素,至于如何影响,要看它的兄弟元素是块级元素还是内联元素.如果兄弟元素是块级元素,会无视这个浮动元素,即兄弟元素和浮动元素共处同行,浮动元素会覆盖兄弟元素.除非这些 div 设置了宽度,并且父元素的宽度不足以包含它们,这样兄弟元素才会被强制换行:如果兄弟元素是内联元素,则会尽可能

闭合CSS浮动元素的实用方法

按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子的排列.因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素.但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢. 后来又有了一种新的方式,使用 :after 伪类动态的嵌入一个用于清除浮动的元素

关于清除浮动与闭合浮动

在给HTML添加样式的构成中,css是必不可少的的,然而css中有一些功能的实现可以通过不同的方法实现,通过效果查看好像并没有什么不同,那它们之间到底有什么本质区别呢,又有哪些概念被我们无意的忽略或者无视了呢,突然想总结总结这一类的问题,本篇日志是本人对于"清除浮动"的一些想法,欢迎看到此篇朋友们加以改正指导. 为什么要清楚浮动 在布局的时候我们经常希望某些内容能够水平排布,水平排布后,由于内部内容不确定,高度不能简单的给一个定值.而如果不给高度,子元素又都浮动了,父盒子就会因为没有子

css清除&amp;闭合浮动

那些年我们一起清除过的浮动   原文地址:http://www.iyunlu.com/view/css-xhtml/55.html 浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器).也许很多人都有这样的疑问,浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手. 一.清除浮动 还是

CSS 清除浮动的4种方法

此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景.<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{flo