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 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...
随机推荐
- 彻底搞懂Scrapy的中间件(二)
在上一篇文章中介绍了下载器中间件的一些简单应用,现在再来通过案例说说如何使用下载器中间件集成Selenium.重试和处理请求异常. 在中间件中集成Selenium 对于一些很麻烦的异步加载页面,手动寻 ...
- 在Kali Linux中下载工具Stegsolve
关键字:Java,Stegsolve,Write Up 一.首先需要配置Java环境. 1.下载最新的Java JDK. 注意选择Accept License Agreement,并下载.tar.gz ...
- Ionic框架搭建简明教程
1.安装node.js 安装教程:https://www.cnblogs.com/zhouyu2017/p/6485265.html 安装完成后,执行:cnpm install –g cordova ...
- Python第8天
zip() 拉链方法 max(字典) 默认比较字典的key,不同类型的数据不能比较,只要可以被for迭代即可 利用zip与max(字典)共同使用 ord() — chr() ascii码表数字与 ...
- 4Linux环境变量、Vim、Shell脚本
环境变量 命令在Linux中的执行分为4个步骤: 1.以路径的形式来执行 2.命令的别名形式来执行,alias 新命令=“原始命令”,新命令与原始命令互不冲突,可以同时使用,重启失效,修改/etc/p ...
- CentOS7.0 采用压缩包 安装Nginx 1.7.4和添加Tomcat为系统服务 nginx结合tomcat
CentOS7.0 采用压缩包 安装Nginx 1.7.4 一.安装准备首先由于nginx的一些模块依赖一些lib库,所以在安装nginx之前,必须先安装这些lib库,这些依赖库主要有g++.gcc ...
- ubuntu 外接显示器
xrandr --help xrandr # 列出显示器 sudo xrandr --output eDP-1 --off # 关闭eDP-1显示器 sudo xrandr --output ...
- UE4C++定义属性修饰符总结
1.BlueprintAssignable 暴露该属性来在蓝图中进行赋值,用于绑定多播委托 2.BlueprintCallable 用于从蓝图中调用C++原生函数 3.BlueprintReadO ...
- eclipse配置maven仓库
在eclipse中搭建maven工程时,首先需要搭建好maven本地仓库,搭建过程比较简单 1.首先,在eclipse中,打开windows->Maven->User Settings; ...
- Excel下拉选项二级联动
在日常工作中,难免遇到操作excel的时候,二级联动下拉选项多用于像地市区县的应用场景 1)先把要联动的内容准备好,把它放到第二个sheet页中 2)操作级联的文本 全部选中之后,Ctrl+G -- ...