浮动的清除有两种方式:

一、clear

  clear:both/left/right;

二、创建BFC

  (1)什么是BFC?

  BFC,块级格式化上下文,是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。通俗的讲就是相当于一个把浮动的元素框起来并隔离的容器,容器里面的子元素不会影响到外面元素,使浮动不会溢出。

  (2)哪些元素会生成BFC?

  ①根元素或其它包含它的元素

  ②float的值不为none

  ③overflow的值不为visible

  ④display的值为inline-block/table-cell(表格单元格)/table-caption(表格标题)/flex/inline-flex

  ⑤position的值为absolute/fixed

  (3)BFC还有哪些作用?

  BFC除了可以用来清除浮动,还可以用于防止margin折叠、左右两栏布局这两个作用。

更多有关 BFC 的知识请查看我的另一篇博客:BFC 小结

本文链接:http://www.cnblogs.com/xsilence/p/5538065.html

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

  1. CSS 清除浮动 clear 属性

    CSS 清除浮动 clear 属性用于设定元素哪一侧不允许有其他浮动元素(而并非取消元素的浮动). 可能的取值如下: 取值 说明 none 默认值,允许两侧都有浮动元素 left 左侧不允许有其他浮动 ...

  2. 浮动、清除浮动、BFC

    一. 浮动 1. 浮动的定义 使元素脱离文档流,按照向左或向右的方向移动,直到它的外边缘碰到包含它的框或另一个浮动框为止. 脱离文档流就是在页面中不占位置了. 左浮动右浮动此处就不再赘述了. 2. 看 ...

  3. css 清除浮动 clear

    .clearfix{ zoom:1;/*对于老版本的IE进行兼容的设置*/ } .clearfix:after{ content:""; display:block; visibi ...

  4. 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制,还可以声明什么控制? 3,如何让2个div,并排显示。4,清除浮动 clear:left / right / both

    1,css有几种引入方式 使用HTML标签的STYLE属性 将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式.这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利 ...

  5. 关于浮动&关于BFC规范&whyoverflow清除浮动

    https://www.cnblogs.com/smivico/p/7656270.html 浮动 https://www.jianshu.com/p/4b93eecb090e BFC https:/ ...

  6. 【转】CSS中的浮动和清除浮动

    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

  7. CSS学习摘要-浮动与清除浮动

    以下从浮动到BFC的段落 摘自MDN 网络开发者 float 浮动 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部 ...

  8. css 盒模型 文档流 几种清除浮动的方法

    盒模型 1.box-sizing: content-box 是普通的默认的一种盒子表现模式 盒子大小为 width + padding + border   content-box:此值为其默认值,其 ...

  9. CSS——如何清除浮动

    众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...

随机推荐

  1. 小清新的jQuery ck-slide 图片轮播

    ck_slide 是一款小清新的jQuery 幻灯片插件,它非常小巧,压缩后仅 3KB,基本功能可以满足.它支持淡入淡出/左右滚动.箭头/圆点控制.自动播放. 在线实例 默认(淡入淡出) 左右滚动 自 ...

  2. 唯美!分享8款响应式的 WordPress 餐厅主题

    您是否拥有一个餐厅,酒吧,咖啡馆,小酒馆,比萨饼店?如果答案是肯定的,请确保您在网上也提供服务.为了使您的工作更轻松,我们选择了一些新的和独特的餐厅主题,覆盖了范围很广的食品企业.这些主题提供了很多很 ...

  3. 高清VGA编码器|上海视涛科技

    VGA编码器(E200)简介 高清VGA编码器是上海视涛科技出品的高性能VGA编码产品.该VGA编码器是上海视涛科技完全自主研发,并适用于VGA信号的编码采集及网络传输的专用硬件设备.可兼容各厂家的N ...

  4. 数据连接到 Web 服务 InfoPath 2010 窗体中的 SharePoint 服务器上运行时的错误消息:"401-未经授权"解决方案

    症状: 请考虑以下情形: Web 窗体发布到 SharePoint 服务器. 您创建 Microsoft InfoPath 2010 表单所在的 SharePoint 服务器上使用到位于数据的数据连接 ...

  5. php强制转换类型和CMS远程管理插件的危险

    远程管理插件是十分受WordPress站点管理员欢迎的工具,它们允许用户同时对多个站点执行相同的操作,如,更新到最新的发行版或安装插件.然而,为了实现这些操作,客户端插件需要赋予远程用户很大的权限.因 ...

  6. static和extern对函数的作用

  7. 【原】你真的懂iOS的autorelease吗?

    或许这个题目起得有点太高调了,不过我只是想纠正一些童鞋对于autorelease的认识,如果能帮到几个人,那这篇文章也就值得了!当然,高手请绕道 本文主要探讨两个方面:(1)autorelease对象 ...

  8. 用GCD线程组与GCD信号量将异步线程转换为同步线程

    有时候我们会碰到这样子的一种情形: 同时获取两个网络请求的数据,但是网络请求是异步的,我们需要获取到两个网络请求的数据之后才能够进行下一步的操作,这个时候,就是线程组与信号量的用武之地了. #impo ...

  9. Git详解之三 Git分支

    相关文档 — 更多 Git 基础培训.ppt GIT 使用经验.ppt GIT 介绍.pptx GIT 分支管理是一门艺术.docx Eclipse上GIT插件EGIT使用手册.docx git/gi ...

  10. HTML5 respond.js 解决IE6~8的响应式布局问题

    HTML5 respond.js 解决IE6~8的响应式布局问题   响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...