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. Java 8 默认方法

    转自:https://www.runoob.com/java/java8-default-methods.html Java 8 新增了接口的默认方法. 简单说,默认方法就是接口可以有实现方法,而且不 ...

  2. Base64图片转Blob对象

    //将Base64图片转成Blob对象 //@args: base64Url:编码字符串,contentType:类型. function base64UrltoBlob(base64Url, con ...

  3. Delphi中Chrome Chromium、Cef3学习笔记(四)

    原文   http://blog.csdn.net/xtfnpgy/article/details/48155323   一.遍历网页元素并点击JS: 下面代码为找到淘宝宝贝页面,成交记录元素的代码: ...

  4. PHP提交订单,信息的传递

    今天被之前的同事问到订单这一块(他用的是Laraver)..."多个商品在同一个订单里,怎么将相同的商品放进一个分组"... 当时我和他的反应都是,array_push, arra ...

  5. Redis读超时排查

    现象:STORM UI中发现bolt中有failed,异常日志抛异常read time out 业务场景:storm读写redis. 查看redis日志发现,正常情况下 每隔2小时都会有超时的异常抛出 ...

  6. 基于mysql创建库的报错解决小记mysql ERROR 1044 (42000): Access denied for user ''@'localhost' to database

    mysql ERROR 1044 (42000): Access denied for user ''@'localhost' to database异常处理 1.找到find / -name my. ...

  7. 阿里巴巴 Weex

    原文链接:https://blog.csdn.net/zz901214/article/details/79168707/ 分享嘉宾:侑夕 阿里巴巴高级前端工程师(上张帅哥的图镇楼,看完,更有动力学习 ...

  8. cdnbest常见问题

    1.cdn配置了ssl证书,经常有用户说访问不了,如果cdn配置了ssl,源没有配置ssl,在cdn里添加源ip的写法: 如果源也配置了ssl证书,写法如下图: 2. cdn报504问题的原因: 50 ...

  9. MongoDB集群的搭建

    一.环境准备 1.Centos7 2.mongodb3.4.10 3.三台机器IP分别是:192.168.1.100.192.168.1.135.192.168.1.136 二.mongdb数据库的安 ...

  10. 需要重写URL但请求的目录不存在报404

    用的是asp.net webform,在global.asax的application_beginrequest中写的代码 很简单的一个需求,在url中输入http://www.test.com/lc ...