浮动的清除有两种方式:

一、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. 【经验之谈】前端面试知识点总结(CSS相关)——附答案

    目录 二.CSS部分 1.解释一下CSS的盒子模型? 2.请你说说CSS选择器的类型有哪些,并举几个例子说明其用法? 3.请你说说CSS有什么特殊性?(优先级.计算特殊值) 4.要动态改变层中内容可以 ...

  2. [Dynamics CRM 2016]如何配置多语言显示

    1.安装相对应的语言包并安装 2015语言包下载地址:https://www.microsoft.com/en-us/download/details.aspx?id=45014 2016语言包下载地 ...

  3. HttpClient示例

    <%@page import="com.sun.xml.ws.client.BindingProviderProperties"%> <%@page conten ...

  4. runtime学习笔记

    获取属性objc_property_t * propertys = class_copyPropertyList(clazz, &outCount); 获取属性名NSString * key ...

  5. #VSTS日志# 2015/12/10 – 终于可以删除工作项了

    最近的更新不少,废话少说,直接上干货 定制工作项字段 本周的更新后,所有的用户都可以在vsts上直接给工作项添加字段了,具体内容包括– 添加新字段(日期,字符串,整形,数字)– 字段显示位置配置– 过 ...

  6. 用css3绘制你需要的几何图形

    1.圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class="size example ...

  7. Visual studio 2013安装

    最头疼装一些需要安装插件的软件,刚开始下载了VS2013的一个版本,安装到一半就发现还得装一些必要插件,然后得重新删了再安装,倒弄了还几次才装好.这是第一次安装时是出现的情况. 第二次尝试安装,把所有 ...

  8. SQL Server 2012实施与管理实战指南(笔记)——Ch3Alwayson可用组

    3.AlwaysOn可用组 Alwayson支持的,是一个可用性组,每个可用性组是包含了多个用户数据库的容器,可用性组内的数据库可以作为一个整体进行故障转移. AlwaysOn关键特性: 一.类似集群 ...

  9. Linux多线程同步方式

    当多个线程共享相同的内存时,需要确保每个线程看到一致的数据视图,当多个线程同时去修改这片内存时,就可能出现偏差,得到与预期不符合的值.为啥需要同步,一件事情逻辑上一定是有序的,即使在并发环境下:而操作 ...

  10. SQL Server中的锁的简单学习

    简介 在SQL Server中,每一个查询都会找到最短路径实现自己的目标.如果数据库只接受一个连接一次只执行一个查询.那么查询当然是要多快好省的完成工作.但对于大多数数据库来说是需要同时处理多个查询的 ...