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. python 虚拟环境使用与管理(virtualenv)

    安装虚拟环境 pip install virtualenv 安装虚拟环境管理工具 pip install virtualenvwrapper-win 设置虚拟环境目录(虚拟环境存放位置) 默认创建的虚 ...

  2. RPM包指令总结

    一.RPM RPM包安装位置 RPM包默认安装路径 /etc/ 配置文件安装目录 /usr/bin/ 可执行的命令安装目录 /usr/lib/ 程序所使用的函数库保存位置 /usr/share/doc ...

  3. python报以下错误:TypeError: 'int' object is not subscriptable

    原因:数组忘了写下标,数组某项赋值成了 数组对象=数字: 查询其它人的博客,发现仍有其它可能引发此错误,无非是不可以相互操作的对象进行了操作或者是访问对象的方式不对,如:给数字加了下标,对一维数组加了 ...

  4. EasyUI在window中使用kindeditor 4.1.10在IE9中不能回显、获得焦点编辑的问题

    描述 :kindeditor4.1.10版本是当前最新的版本,在浏览器兼容性和功能方面都是值得一赞的,在开发中能方便快捷的满足一些开发需求. 问题 :  问题总是有的.  在使用过程中,遇到EasyU ...

  5. Linux ansible 之 playbook

    playbook 剧本 yaml 字典 key:value 列表 [] - 后缀名:yaml.yml playbook 命令格式 Usage: ansible-playbook [options] p ...

  6. php+javascript实现的动态显示服务器运行程序进度条功能示例

    本文实例讲述了php+javascript实现的动态显示服务器运行程序进度条功能.分享给大家供大家参考,具体如下: 经常有这样的业务要处理,服务器上有较多的业务需要处理,需要分批操作,于是就需要一个提 ...

  7. ucore-lab1-练习6report

    练习6--完善中断初始化和处理 1.  中断向量表中一个表项占多少个字节?其中哪几位代表中断处理代码的入口? 答:系统将所有的中断事件统一进行编号(0-255),这个编号称为中断向量.中断向量表的一个 ...

  8. jdk1.7/1.8 HashMap、ConcurrentHashMap详解

    摘要: 本文主要参考网上Blog(详见Reference)总结ConcurrentHashMap的各方面知识,方便复习 转自:https://my.oschina.net/hosee/blog/675 ...

  9. java 基础 ----- Arrays 工具类

    -----  Arrays  工具类是一个比较方便的类 常用的方法 也可以通过jdk文档进行查看    右侧有偶 对一些比较常用的方法进行演示   直接放在main方法中进行测试 ----   equ ...

  10. Python学习笔记十_模块、第三方模块安装、模块导入

    一.模块.包 1.模块 模块实质上就是一个python文件.它是用来组织代码的,意思就是把python代码写到里面,文件名就是模块的名称,test.py test就是模块的名称 2.包 包,packa ...