css2----清除浮动

  1. 为什么要清除浮动?

    非IE下,当容器的高度为auto,容器有浮动元素,此时容器的高度不能自己伸长适应内容的高度,造成内容溢出乃至影响布局,即所谓的“浮动溢出”,为防此象,需要清除浮动。

  2. 如何清除浮动?

    这里只记录最好的一种方法,伪元素和ie 触发haslayout:

    .clearfix{zoom:1;}

    .clearfix:after{content:"x";display:block;height:0;clear:both;visibility:hidden;}

    a.给容器添加一个clearfix的class;

    b.给这个class添加一个:after伪元素实现添加看不见的块元素

注意:visibility:hidden和display:none的不同:

前者:隐藏但是占位;

后者:不显示不占位。

时间: 2024-11-09 13:38:43

css2----清除浮动的相关文章

清除浮动方法解析

清除浮动方法解析 清除浮动带来的额外影响 如果对于浮动不熟悉的同学,可以看看介绍float的文章.传送门:CSS float 我们知道,在一个父元素内如果遇到某个浮动元素,此时父元素的高度会发生塌陷.针对父元素高度塌陷的问题,现在已经有了很多的解决方案.针对每一个方案,我们来进行深度的剖析. 添加空块级元素 这种方法比较容易,但是要注意的是这个空元素必须是一个块级元素,不能是行内元素或者是行内块元素.缺点就是多了一些没有意义的标签.代码如下. //HTML <div class="cont

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

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

css浮动和清除浮动

浮动存在的原因 在word排版中,文本可以环绕图片.在css中,想要实现文字环绕的效果,只能借助于float,没有其他的替代方式.在实际中,文档的布局经常会使用浮动. float属性 float属性,默认为none,也就是标准流通常的情况.如果将float的属性的值设置为left或right,元素就会向其父元素的左侧或右侧紧靠. inherit表示从父元素继承float属性的值. clear属性 clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为

CSS布局模型 之 浮动模型(浮动的工作原理和清除浮动技巧?)

浮动的工作原理 浮动是让某元素脱离文档流,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动,但都为其腾出空间,块级元素也不例外(被浮动元素占据了部分行空间的块级元素,仍然被看作是占据了一整行,只不过是被浮动元素占据的那部分空间无法利用罢了). 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止:如果当前线上的水平空间不足,它将逐行向下移动,直到有空间为止(所以浮动元素不会影响页面上方布局).任何元素都可以浮动,浮动元素会生成一个块级框(拥有块级

始于清除浮动、追溯到源头

如果你喜欢用浮动来进行布局,我深信,你肯定受过浮动带来的虐心.尽管我记得在张鑫旭大哥的某篇博文里看到过,浮动,其实并不是作为一种布局的手段,然后balabala,确实言之很有理.我也曾经这么认为,我现在也是这么认为的.不过,原则上,我们应该可以有这么个底线,好用并且有完美解决问题的方法,就有存在的理由.浮动是我们在写css不可避免的. 一.我们为什么要清除浮动 因为一个元素浮动之后就会脱离文档流,这样使得包含它的父元素并不会因为这个浮动元素的存在而自动撑起高度,此曰”高度塌陷“. 与此同时,一个

再聊清除浮动

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

详说清除浮动

浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生一系列的问题.当然,随着时间的推移,这些问题终究有了一些出色的解决方案,Kayo 要在这里详细介绍的,除了是这些解决方案,还有其中的原理.(温謦提示:文章信息量大且篇幅长,请各位自备瓜子,饮料,音乐). 一.什么是清除浮动? 1.浮动的缺陷 在了解如何清除浮动之前,Kayo 先介绍为什么需要清除浮动.如本文开头所说的,浮动虽然可以便于页面布局,但同时会产生一些问题,也就是我们常说的“副作用”.而一个元素设置了浮动(即

清除浮动技巧总结

一.为何要清除浮动? 要解答这个问题.我们得先说说CSS中的定位机制:普通流,浮动.绝对定位 (当中"position:fixed" 是 "position:absolute" 的一个子类). 1)普通流:非常多人或者文章称之为文档流或者普通文档流.事实上标准里根本就没有这个词. 假设把文档流直译为英文就是 document flow ,但标准里仅仅有还有一个词,叫做普通流(normal flow),或者称之为常规流.但似乎大家更习惯文档流的称呼,由于非常多中文翻译

总结清除浮动方法大全(7种)

1)添加额外标签 这是在学校老师就告诉我们的 一种方法,通过在浮动元素末尾添加一个空的标签例如 <div style="clear:both"></div>,其他标签br等亦可. 再如: <div class="warp" id="float1"> <h2>1)添加额外标签</h2> <div class="main left">.main{float:l

清除浮动--全面解读(摘自网摘--那些年我们一起清除过的浮动)

一.清除浮动和闭合浮动 所谓清除浮动,是指显示上正确.避免了文档流自动包裹浮动元素的特性(常见的是footer部分设置clear:both;属性): 而闭合浮动,是确实解决了高度塌陷的问题,使得wrap元素具有了高度.可疑包裹进浮动的元素.所以说,称之为闭合浮动更为合适. 二.闭合浮动的原理 常用的清除浮动方法有许多,可分为两类 在浮动元素末尾添加空元素,设置clear:both属性 父元素设置overflow或者display:table; 那么其中的原理是什么呢,在这之前需要先了解一下has