bfc与浮动元素的关系
首先说明两个特性:
1,浮动元素兄弟元素的布局规则
当html中存在浮动元素时,其兄弟元素的布局遵循如下规则:
(1)块级元素的渲染无视浮动元素
(2)文本内容或者是行内元素的渲染会考虑到浮动元素的存在
形象一点来讲就是没有浮动的块级元素在浏览器上占位置的时候看不到浮动元素的存在,所以浮动元素所占据的位置对它来讲还是可用的
但是文本内容或行内元素在浏览器上占位置的时候还是会看到浮动元素的存在,所以它是不会跑到浮动元素的位置上去的,所以基于这样的特性,
我们再来看看这样的代码
上面代码在浏览器访问的效果是这样的
黑色div浮动了,此时没有浮动的块级div就覆盖到了黑色div上方,不过因为绿色div前面有非浮动元素存在,所以它往下靠了一些,
而再看文本内容123以及包含内容456的span,它们都排在了浮动元素的后面,那下面在讲述最终问题之前还是先看看下一个概念bfc
2,bfc
bfc指的是block format context,意为块级格式上下文,当元素具有某些特定的样式时会触发元素变为bfc元素,而触发bfc的元素将会改变一小部分的渲染规则,可用于解决一些css的疑难bug
那么如何才能触发bfc呢?
一般来讲,如果一个元素具有以下其中一个样式,则这个元素变成了bfc元素,其渲染规则将会发生一些变化,这些样式有:
position:absolute;
display:inline-block;
float:left/right;
overflow:hidden;
现在再回过头来看看第一个特性中提到的例子,先给div2加上一个overflow:hidden的样式,修改后样式如下
然后再看看页面效果
此时绿色div不再无视黑色div的存在了,而是也排在了黑色div后面,所以本例子所展示的就是触发了bfc的元素改变了原本块级元素的布局无视浮动元素的特性,
而这一特性其实可以运用到解决子元素浮动父元素无法被子元素撑开高度的问题中,不过这个问题其实更好的解决方法是清除浮动,这里只是说明触发bfc能够改变元素的部分渲染规则这一特点,
毕竟实际中硬是要给元素写上特定的样式以触发bfc可能会违背原本的布局要求,反而捡了芝麻丢了西瓜
bfc与浮动元素的关系的更多相关文章
- 关于BFC不会被浮动元素遮盖的一些解释
简介 在清除浮动一文中提到BFC不会被浮动元素遮盖,并没有详细探究表现行为.规范中指出,在同一个BFC内,作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box. ...
- 学习总结:CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型
一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...
- BFC与浮动
一.BFC的含义 BFC(block formatting contexts) 块级元素格式化上下文,它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用. 块级元素:父级(是一个块 ...
- BFC 块级元素格式化上下文
Block Formatting Contexts: 块级元素格式化上下文块级元素如何对它的内容(子元素:也是一个块元素)进行布局,以及与其它元素(与内容同级别)的关系和相互作用 普通文档流的布局规则 ...
- 浅谈对BFC的认识,以及用bfc解决浮动问题
我们在前端的学习过程中常常会遇到BFC,用BFC来解决一些margin塌陷.margin合并清理浮动流的问题 那么问题来了,我们所说的BFC到底是个什么东西呢: 什么是BFC BFC(Block Fo ...
- HTML。CSS浮动元素详解
浮动定位是指 1.1将元素排除在普通流之外,即元素将脱离标准文档流 1.2元素将不在页面占用空间 1.3将浮动元素放置在包含框的左边或者右边 1.4浮动元素依旧位于包含框之内 2. 浮动的框可以向左或 ...
- 使用样式“clear”和“overflow”消除浮动元素对环绕行框的影响
为元素设置“float”样式之后,元素会脱离标准文档流,不再占据原来的空间.后续元素会向前移动,占据这个新的空间.后续的文本会围绕着浮动元素分布,形成一种环绕布局的现象. 示例代码: <!DOC ...
- css让浮动元素水平居中
对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中. 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题.如下: HTML 代码: <div class=&q ...
- html--offsetLeft,Left,clientLeft的关键--动态获取计算元素位置关系
动态计算元素位置关系的时候,必备... http://www.cnblogs.com/panjun-Donet/articles/1294033.html
随机推荐
- 使用索引别名和Rollover滚动创建索引
使用索引别名和Rollover滚动创建索引 在ElasticSearch6.3.2 集群做节点冷(warm) 热(hot) 分离中,实现了ElasticSearch集群节点的冷热分离,新创建的索引只允 ...
- 《跟唐老师学习云网络》 -第4篇 router路咋走啊【华为云技术分享】
[摘要] 好了,到这里至少你应该能看懂路由表信息了.给你一个目的IP,你也应该知道它会使用哪一条路由了. 路怎么走就看骚年你了~ 一.路由 其实关于网络大家遇到最多的问题就是:卧 槽,为什么不通啊! ...
- 【spring boot】spring boot的自定义banner修改+spring boot启动项目图标修改
1.启动Spring Boot项目后会看到这样的图案,这个图片其实是可以自定义的,打开网站 http://patorjk.com/software/taag/#p=display&h=3&am ...
- 用JavaScript带你体验V8引擎解析标识符
上一篇讲了字符串的解析过程,这一篇来讲讲标识符(IDENTIFIER)的解析. 先上知识点,标识符的扫描分为快解析和慢解析,一旦出现Ascii编码大于127的字符或者转义字符,会进入慢解析,略微影响性 ...
- WPF 精修篇 倾斜 SkewTransform
原文:WPF 精修篇 倾斜 SkewTransform 倾斜 SkewTransform AngleX 倾斜X角度 AngleY 倾斜Y角度 CenterX CenterY 中心点 <Stack ...
- DateTime的ToString方法格式
新建一个.NET Core控制台项目,敲入如下代码: using System; namespace NetCoreDatetime { class Program { static void Mai ...
- react+umi+netcore+signalR BS和客户端设备 简单通讯
微信扫码登录工作用 仅作记录 扫码访问服务器地址 实现扫码服务器地址通讯中断设备解锁 采用signalR 双向异步通知中断 创建控制器 ChatController 注入集线器上下文 IHubCont ...
- C#查找指定路径下的所有指定文件,并读取
string path="指定路径"; string filename =“需要查找的文件名.csv"; List<string> lineStringLis ...
- C#中几种单例模式
1.静态代码块 /// <summary> /// 静态代码块 /// 仅在第一次调用类的任何成员时自动执行 /// </summary> public class Singl ...
- java自适应响应式 企业网站源码 SSM 生成静态化 手机 平板 PC
java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成ht ...