1.清浮动(不考虑兼容的话这一项够用了):

.clear:after{

content:'';

display:block;

clear:both;

}

兼容ie6或7 加一个

.clear{

*zoom:1;  //用来触发 haslayout(IE浏览器的BFC)

}

2.BFC (一套渲染机制)

触发一个元素的BFC
相当于在这个元素里面建立起一堵围墙
围墙里面的内容和围墙外面的内容不会产生干扰
 

触发BFC的方式(以下任意一条就可以)

1.float的值不为none

2.overflow的值不为visible

3.display的值为table-cell、tabble-caption和inline-block之一

4.position的值不为static或则releative中的任何一个

https://www.cnblogs.com/CafeMing/p/6252286.html

BFC和清除浮动的更多相关文章

  1. BFC之清除浮动篇&clear

    我们在日常代码生活中,或多或少会利用浮动来布局,例如导航布局,如下图所示: 但是,我们在实现的时候,经常会遇到父元素“塌陷”以及清除浮动问题.例如 <!DOCTYPE html> < ...

  2. BFC清除浮动

    BFC 就是清除浮动 用来处理文档脱离文档流的问题 清除浮动的方法: a.父元素也添加一个浮动 产生弊端就是:margin 不能使用 b.给父元素添加一个:display:inline-block 弊 ...

  3. 【Web】网页清除浮动的方法

    网页中,经常用浮动的div来布局,但是会出现父元素因为子元素浮动引起内部高度为0的问题,为了解决这个问题,我们需要清除浮动,下面介绍4中清除浮动的方法. 在CSS中,clear属性用户清除浮动,语法: ...

  4. 详说 CSS 清除浮动

    转自:http://kayosite.com/remove-floating-style-in-detail.html 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生 ...

  5. CSS给元素清除浮动影响的方法,--最全四种方法

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. CSS——浮动及应用&清除浮动

    浮动(float) 1.普通流(normal flow) 这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以. 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置.如何把盒子摆 ...

  7. html-css:浮动_清除浮动

    1.浮动 清除浮动之前我们首先需要了解为什么要清除浮动 1. 假设我们有一个父盒子,不设置高度,其高度有内部子盒子的大小自动撑开,这样是完全可行的,因为有时候我们并不想直接固定死父盒子的大小,而是根据 ...

  8. CSS系列,清除浮动方法总结

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素.在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...

  9. 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

随机推荐

  1. Django整理1

    基本结构 │ db.sqlite3 ----------sqlie3数据库 │ manage.py │ ├─logres │ │ admin.py 后台,可以用很少量的代码就拥有一个强大的后台. │ ...

  2. kettle中文乱码问题

    db连接->选项 配置参数 characterEncoding,设置值为gbk/utf8.

  3. reg 和wire 区别

    reg相当于存储单元,wire相当于物理连线 Verilog 中变量的物理数据分为线型和寄存器型.这两种类型的变量在定义时要设置位宽,缺省为1位.变量的每一位可以是0,1,X,Z.其中x代表一个未被预 ...

  4. 日常杂记——C#验证码

    随机生成验证码,不能以图片的形式存在,所以需要将验证码图片以MemoryStream形式存储在内存的流当中,但是在使用时发现使用PictureBox控件无法显示内存流,所以需要先将流转化为图片,才可以 ...

  5. 5.SLB排错思路

    500/502/504可能的原因: https://help.aliyun.com/knowledge_detail/55207.html 请求不均衡可能的原因: https://help.aliyu ...

  6. Visual Studio 2017 密匙

    趁着这两天微软发布了Visual Studio 2017,安装体验了这个史上最强IDE最新版,分享一下自己的安装过程: VS2017下载地址,该版本堪称史上最大IDE,随便勾了几个选项,就要占用几十个 ...

  7. PeopleSoft进程卡在“已排队”状态诊断和解决

    进程卡在“已排队”状态的原因很多.最常见的原始是进程调度器服务挂掉了(可以在“进程监视器”页面的“服务器”tab页中查看). 除此之外,还可以进行下面诊断:1. 检查下面3张表:PSPRCSRQSTP ...

  8. 解决ajax请求默认不支持重定向问题

    1,Ajax默认是不支持重定向的,只局部刷新数据,不跳转页面. 2,后台代码处理: @RequestMapping("/updateCurrentUser") public Str ...

  9. html5下F11全屏化的几点注意

    1.实现全屏化 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestF ...

  10. .net 语音,视频等格式转换

    最近在做微信公众号开发的时候遇到一个问题,就是微信接收到语音消息的格式为amr,在网页上通常不能直接播放,需要先转为mp3,于是找到了一个办法,使用ffmpeg.exe,网上可以搜一下ffmpeg.e ...