清除浮动的方法

清除浮动方法大致有两类,一类是clear:both | left | right ,另一类则是创建BFC,细分又可以分为多种。

  • 通过在浮动元素末尾添加一个空的标签例如并设置样式为clear:both | left | right ,其他标签br等亦可。
<div class="parent">
<div class="child"></div>
<div style="clear: both;"></div>
</div>

优点:简单。

缺点:增加了额外的标签,并且很显然这并不符合语义化。

*使用 br标签和其自身的 html属性,br 有 clear=all | left | right | none;的属性。

<div class="parent">
<div class="child"></div>
<br clear='all'>
</div>

优点:简单代码量少,比空标签语义化稍好。

缺点:同上。

  • 使用::after伪元素(万金油方法)

ps:由于IE6-7不支持:after,使用`zoom:1触发hasLayout。其实是通过 content 在元素的后面生成了内容为空的块级元素

代码如下

.clearfix:after {
content:"";
display:block;
height:0;
visibility:hidden;//这一条可以省略,证明请看原文精益求精部分
clear:both;
}
.clearfix {
zoom:1;
}

优点:结构和语义化完全正确,代码量居中。

缺点:复用方式不当会造成代码量增加。

伪元素还有一种写法

// 用display:table 是为了避免外边距margin重叠导致的margin塌陷, 内部元素默认会成为 table-cell 单元格的形式
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
zoom:1;
}
  • 父元素设置 overflow:hidden,(PS:在IE6中还需要触发 hasLayout ,例如 zoom:1)

优点:不存在结构和语义化问题,代码量极少。

缺点:由于hidden的原因,当内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素,还会导致中键失效(鼠标中键)。

  • 父元素设置 overflow:auto 属性

优点:同上

缺点:多个嵌套后,会有bug,详情看原文。

  • 父元素也浮动

优点:代码少

缺点:总不能一直浮动到body吧。

  • 父元素设置display:table

优点:结构语义化完全正确,代码量极少。

缺点:会造成盒模型的改变。

其余的参考上面如何创建BFC。

Css 去除浮动的更多相关文章

  1. css清除浮动深度解析

    首先引入一个新的概念"包裹". float:left会使得该属性的作用容器包裹住其内部元素:那么还有么有其他属性能够产生类似于浮动这种包裹性? 答案是有的:像"浮动&qu ...

  2. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

  3. CSS清除浮动技巧

    一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了f ...

  4. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  5. CSS清除浮动八种方法

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...

  6. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  7. 更简洁的 CSS 清理浮动方式

    CSS清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代 ...

  8. css清除浮动定位造成的异常

    清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...

  9. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

随机推荐

  1. idea 改变version control

    idea 当一个moudule拥有2个VCS的时候 如何切换其应用的VSC 如拥有 SVN 和 GIT 2个版本  ,想换回SVN则删除  git目录 将 version control  vcs 设 ...

  2. 基于jQuery适合做图片类网站的特效

    分享一款基于jquery适合做图片类网站的特效.这是一款鼠标经过图片滑动弹出标题效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="c ...

  3. 基于HTML5手机登录注册表单代码

    分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&qu ...

  4. A. Counterexample (Codeforces Round #275(div2)

    A. Counterexample time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  5. 一键安装mysql

    #!/bin/bash # # Rrogram: # install mysql # History: # -- luoqi v0. release # email: # @qq.com #以下rpm ...

  6. JDK自带观察者的使用

    被观察者 package observerForJDK; import java.util.Observable; /** * 新闻派发器,当有新的新闻时派发给所有的订阅读者(观察者) */ publ ...

  7. STM32f103的数电采集电路的双ADC的设计与使用

    STM32F103C8T6拥有3个ADC,其独立使用已经在本文的3.1.3里面有详细的介绍,这里主要是介绍双ADC的同时使用,即STM32的同步规则模式使用.在此模式在规则通道组上执行时,外部触发来自 ...

  8. Redis初步认识

    官网:redis.io Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的 ...

  9. 解决:According to TLD or attribute directive in tag file, attribute value does not accept any express。

    http://blog.csdn.net/lzblog/article/details/22076893 ——————————————————————————————————————————————— ...

  10. 记一次MyEclipse闪退的解决方法

    http://www.th7.cn/Program/java/201408/262487.shtml ———————————————————————————————————————————————— ...