html/css系列 BFC
本文详情:https://www.cnblogs.com/chen-...
第一种 BFC中的盒子对齐
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
div {
height: 20px;
}
.container {
position: absolute; /* 创建一个BFC环境*/
height: auto;
background-color: #eee;
}
.box1 {
width: 400px;
background-color: red;
}
.box2 {
width: 300px;
background-color: green;
}
.box3 {
width: 100px;
background-color: yellow;
float: left;
}
.box4 {
width: 200px;
height: 30px;
background-color: purple;
}
第二种 外边距折叠 垂直方向上的距离由margin决定
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
.container {
overflow: hidden;
width: 100px;
height: 100px;
background-color: red;
}
.box1 {
height: 20px;
margin: 10px 0;
background-color: green;
}
.box2 {
height: 20px;
margin: 20px 0;
background-color: green;
}
上下DIV同时margin 造成重叠
第二种BFC,因为浮动造成盒子对齐 解决方法 相隔的DIV换成P标签
第三种DBC 左边浮动右边自适应
第四种DFC 文字环绕 解决方法verflow:hidden清除浮动
html/css系列 BFC的更多相关文章
- CSS系列 (05):浮动详解
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...
- 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法
× 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...
- css系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css系列教程1-选择器全解 css系列教程2-样式操作全解 css选择器全解: css选择器包括:基本选择器.属性选择器.伪类选择器.伪元 ...
- CSS之BFC、IFC、FFC and GFC
CSS之BFC.IFC.FFC and GFC 什么是FC? BFC(Block Formatting Contexts) BFC的布局规则: 如何生成BFC: IFC(Inline Formatti ...
- CSS系列——浏览器默认样式
了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...
- 理解CSS中BFC
BFC(Block Formatting Context) 是Web页面中盒模型布局的CSS渲染模式.它的定位体系 属于 常规文档流 .摘自 W3C : 浮动,绝对定位元素, inline-block ...
- 如何写好css系列之button
现代前端行业的发展,如果你在css的时候,还没有利用一些预编译工具,是否觉得自己太low了.但你是否考虑过搭建一套自己前端框架.可能你会想这是否有必要,因为基础有boostrap,组件库有:easyu ...
- CSS的BFC和hasLayout及其应用场景
前端精选文摘:BFC 神奇背后的原理 一.BFC是什么? 先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观 ...
- css 之 BFC
1,定义 BFC为块级格式化上下文,也就是一块区域内的封闭空间,里面元素无论怎么样,都不会影响外部元素. 2,触发条件 html 根元素 display的值为 inline-block.table-c ...
随机推荐
- ionic3 设置状态栏背景颜色
this.statusBar.styleDefault(); this.statusBar.overlaysWebView(true); this.statusBar.backgroundColorB ...
- facebook第三方登陆(使用sharedSDK)无法加载网址:这个URL的域名未包含应用的域名
http://bbs.mob.com/forum.php?mod=viewthread&tid=8134&extra=page%3D1
- 微信中的APP、公众号、小程序的openid及unionid介绍
微信中的APP.公众号.小程序的openid及unionid介绍 1.unionid 如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只 ...
- idea转eclipse快捷键
1.打开idea,点击上方菜单栏中的File, 2.在弹出的setting页面中左侧导航中选择Keymap:在keymaps下拉列表中选择Eclipse:如果想要使用这个快捷键风格,则点击右侧的cop ...
- org.apache.http.NoHttpResponseException
org.apache.http.NoHttpResponseException 异常: org.apache.http.NoHttpResponseException: The target serv ...
- linux上python3的安装
我这里使用的时centos7-mini,centos系统本身默认安装有python2.x,版本x根据不同版本系统有所不同,可通过 python --V 或 python --version 查看系统自 ...
- SSL_CTX结构体
/* 定义在ssl.h头文件中 */struct ssl_ctx_st { SSL_METHOD *method; unsigned long options; unsigned long mode; ...
- JQueryUI Chosen插件
github地址:https://harvesthq.github.io/chosen/#change-update-events Using Chosen is easy as can be. Do ...
- RxJava操作符实践:8_算术和聚合操作之3_min
发射原始Observable的最小值. Min操作符操作一个发射数值的Observable并发射单个值:最小的那个值. RxJava中,min属于rxjava-math模块. min接受一个可选参数, ...
- Nginx笔记总结二十:nginx索引目录配置
location / { autoindex on; autoindex_localtime on; }