BFC和清除浮动
1.清浮动(不考虑兼容的话这一项够用了):
.clear:after{
content:'';
display:block;
clear:both;
}
兼容ie6或7 加一个
.clear{
*zoom:1; //用来触发 haslayout(IE浏览器的BFC)
}
2.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和清除浮动的更多相关文章
- BFC之清除浮动篇&clear
我们在日常代码生活中,或多或少会利用浮动来布局,例如导航布局,如下图所示: 但是,我们在实现的时候,经常会遇到父元素“塌陷”以及清除浮动问题.例如 <!DOCTYPE html> < ...
- BFC清除浮动
BFC 就是清除浮动 用来处理文档脱离文档流的问题 清除浮动的方法: a.父元素也添加一个浮动 产生弊端就是:margin 不能使用 b.给父元素添加一个:display:inline-block 弊 ...
- 【Web】网页清除浮动的方法
网页中,经常用浮动的div来布局,但是会出现父元素因为子元素浮动引起内部高度为0的问题,为了解决这个问题,我们需要清除浮动,下面介绍4中清除浮动的方法. 在CSS中,clear属性用户清除浮动,语法: ...
- 详说 CSS 清除浮动
转自:http://kayosite.com/remove-floating-style-in-detail.html 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生 ...
- CSS给元素清除浮动影响的方法,--最全四种方法
代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- CSS——浮动及应用&清除浮动
浮动(float) 1.普通流(normal flow) 这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以. 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置.如何把盒子摆 ...
- html-css:浮动_清除浮动
1.浮动 清除浮动之前我们首先需要了解为什么要清除浮动 1. 假设我们有一个父盒子,不设置高度,其高度有内部子盒子的大小自动撑开,这样是完全可行的,因为有时候我们并不想直接固定死父盒子的大小,而是根据 ...
- CSS系列,清除浮动方法总结
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素.在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...
- 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!
BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...
随机推荐
- Git常用命令(一)
转自2.1 Git 基础 - 获取 Git 仓库 获取帮助 `$ git help <verb> $ git <verb> --help $ man git-<verb& ...
- 魔力Python——一些基本概念
1.I/O操作 I/O输入/输出(input/output)的缩写. 概念I/O系统,英文全称为“Input output system”,中文全称为“输入输出系统”,由输入输出控制系统和外围设备两部 ...
- Intellij IDEA 中如何查看maven项目中所有jar包的依赖关系图(转载)
Intellij IDEA 中如何查看maven项目中所有jar包的依赖关系图 2017年04月05日 10:53:13 李学凯 阅读数:104997更多 所属专栏: Intellij Idea ...
- anujs1.4.0发布
经过三个月的埋头苦干,终于完成Fiber版的anujs. 主要特性有: 测试全部改成jest, 迁移官方测试用例.有许多迷你React吹得怎么天花乱坠,但是生命周期钩子的执行顺序无法与官方保持一致,那 ...
- Alpha冲刺
第一天 日期:2018/6/16 1.今日完成任务情况以及遇到的问题 张天旭:根据系统的需求,完成数据库的设计 周甜甜:完成系统后台登录界面的设计及登录功能的实现 李蕾:完成系统后台首页的设计 张海鑫 ...
- 理解 ASP.NET Web API 中的 HttpParameterBinding
背景 问题的起因是这样的.群里面一个哥们儿发现在使用 ASP.NET WebAPI 时,不能在同一个方法签名中使用多次 FromBodyAttribute 这个 Attribute .正好我也在用 W ...
- Docker Got permission denied while trying to connect to the Docker daemon socket at unix://
这是没有权限的原因,先将自己加入docker组,然后在重新启动就可以了, 下面参考来源:https://blog.csdn.net/weixin_40896352/article/details/80 ...
- Linux NGINX部署
一.Nginx简介 Nginx是一个web服务器也可以用来做负载均衡及反向代理使用,目前使用最多的就是负载均衡,具体简介我就不介绍了百度一下有很多,下面直接进入安装步骤 二.Nginx安装 1.下载N ...
- Java的对象传参问题
在c/c++中对于传参类型,无外乎就是传值.传引用.传指针这几种.但在java中,由于没有指针类型,其传参的方式也发生了相应的变化.之前有搜过相关的知识点一直理解的是:Java的传参方式中主要有两种: ...
- 【笔记】Python基础六:模块module介绍及常用模块
一,module模块和包的介绍 1,在Python中,一个.py文件就称之为一个模块(Module). 2,使用模块的好处? 最大的好处是大大提高了代码的可维护性 其次,编写代码不必从零开始,我们编写 ...