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. 彻底搞懂Scrapy的中间件(二)

    在上一篇文章中介绍了下载器中间件的一些简单应用,现在再来通过案例说说如何使用下载器中间件集成Selenium.重试和处理请求异常. 在中间件中集成Selenium 对于一些很麻烦的异步加载页面,手动寻 ...

  2. 在Kali Linux中下载工具Stegsolve

    关键字:Java,Stegsolve,Write Up 一.首先需要配置Java环境. 1.下载最新的Java JDK. 注意选择Accept License Agreement,并下载.tar.gz ...

  3. Ionic框架搭建简明教程

    1.安装node.js 安装教程:https://www.cnblogs.com/zhouyu2017/p/6485265.html 安装完成后,执行:cnpm install –g cordova ...

  4. Python第8天

    zip() 拉链方法 max(字典) 默认比较字典的key,不同类型的数据不能比较,只要可以被for迭代即可 利用zip与max(字典)共同使用 ord() — chr()    ascii码表数字与 ...

  5. 4Linux环境变量、Vim、Shell脚本

    环境变量 命令在Linux中的执行分为4个步骤: 1.以路径的形式来执行 2.命令的别名形式来执行,alias 新命令=“原始命令”,新命令与原始命令互不冲突,可以同时使用,重启失效,修改/etc/p ...

  6. CentOS7.0 采用压缩包 安装Nginx 1.7.4和添加Tomcat为系统服务 nginx结合tomcat

    CentOS7.0 采用压缩包 安装Nginx 1.7.4  一.安装准备首先由于nginx的一些模块依赖一些lib库,所以在安装nginx之前,必须先安装这些lib库,这些依赖库主要有g++.gcc ...

  7. ubuntu 外接显示器

    xrandr --help xrandr   # 列出显示器 sudo xrandr --output eDP-1 --off   # 关闭eDP-1显示器 sudo xrandr --output ...

  8. UE4C++定义属性修饰符总结

    1.BlueprintAssignable  暴露该属性来在蓝图中进行赋值,用于绑定多播委托 2.BlueprintCallable  用于从蓝图中调用C++原生函数 3.BlueprintReadO ...

  9. eclipse配置maven仓库

    在eclipse中搭建maven工程时,首先需要搭建好maven本地仓库,搭建过程比较简单 1.首先,在eclipse中,打开windows->Maven->User Settings; ...

  10. Excel下拉选项二级联动

    在日常工作中,难免遇到操作excel的时候,二级联动下拉选项多用于像地市区县的应用场景 1)先把要联动的内容准备好,把它放到第二个sheet页中 2)操作级联的文本 全部选中之后,Ctrl+G -- ...