清除浮动clear/BFC
浮动的清除有两种方式:
一、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的更多相关文章
- CSS 清除浮动 clear 属性
CSS 清除浮动 clear 属性用于设定元素哪一侧不允许有其他浮动元素(而并非取消元素的浮动). 可能的取值如下: 取值 说明 none 默认值,允许两侧都有浮动元素 left 左侧不允许有其他浮动 ...
- 浮动、清除浮动、BFC
一. 浮动 1. 浮动的定义 使元素脱离文档流,按照向左或向右的方向移动,直到它的外边缘碰到包含它的框或另一个浮动框为止. 脱离文档流就是在页面中不占位置了. 左浮动右浮动此处就不再赘述了. 2. 看 ...
- css 清除浮动 clear
.clearfix{ zoom:1;/*对于老版本的IE进行兼容的设置*/ } .clearfix:after{ content:""; display:block; visibi ...
- 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制,还可以声明什么控制? 3,如何让2个div,并排显示。4,清除浮动 clear:left / right / both
1,css有几种引入方式 使用HTML标签的STYLE属性 将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式.这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利 ...
- 关于浮动&关于BFC规范&whyoverflow清除浮动
https://www.cnblogs.com/smivico/p/7656270.html 浮动 https://www.jianshu.com/p/4b93eecb090e BFC https:/ ...
- 【转】CSS中的浮动和清除浮动
以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...
- CSS学习摘要-浮动与清除浮动
以下从浮动到BFC的段落 摘自MDN 网络开发者 float 浮动 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部 ...
- css 盒模型 文档流 几种清除浮动的方法
盒模型 1.box-sizing: content-box 是普通的默认的一种盒子表现模式 盒子大小为 width + padding + border content-box:此值为其默认值,其 ...
- CSS——如何清除浮动
众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...
随机推荐
- jQuery Wheel 环形菜单插件5种效果演示
很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...
- Ionic - 先进的 HTML5 移动开发框架和 SDK
Ionic 是开源的 HTML5 移动开发框架,基于 HTML.JavaScript.CSS 构建漂亮的,跨平台的混合模式 App,能够和 AngularJS 很好的集成.目前最佳支持的平台是 iOS ...
- c# 嵌入资源文件
欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/zjfree/ ] 开发环境:VS2005 C# 首先将要嵌入的资源拷贝到工程目录下. 设置文件生成操作为:嵌入的资源 获 ...
- 初试钓鱼工具Weeman+DNS欺骗的使用
下午无聊再网上闲逛随意看了下,自己做了一次测试,目前最新的版本是1.6.Weeman是一款运行在Python环境下的钓鱼渗透测试工具 但这款工具简单易用,安装简单,可伪造HTML页面等等...网上看了 ...
- 在Ubuntu上安装Hadoop(单机模式)步骤
1. 安装jdk:sudo apt-get install openjdk-6-jdk 2. 配置ssh:安装ssh:apt-get install openssh-server 为运行hadoop的 ...
- Android 中的Json解析工具fastjson 、序列化、反序列化
Android中通常需要访问服务器,然而服务器返回的数据很多时候都是Json格式 1.fastjson简介 阿里巴巴FastJson是一个Json处理工具包,包括“序列化”和“反序列化”两部分,它具备 ...
- iOS---UISearchBar限制输入字数
- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText // called when text ...
- 实战CENTOS6.5安装docker并创建asp.net mvc 5 镜像,运行MVC 网站
Docker,容器,让研发.测试.生产同一环境,可在linux平台上混合使用JAVA与net 程序 Centos6.5安装docker 参考http://my.oschina.net/kcw/blog ...
- php示例代码之使用MySQLi接口
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- OSGI入门笔记
OSGI框架为Java定义了一个动态模块化系统,它使你可以更好地控制代码结构,动态管理代码的生命周期,并且提供了代码写作的松耦合方式:更值得称道的是,它的规范文档描述详尽.--<OSGI实战&g ...