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
随机推荐
- MyBatis 通过 BATCH 批量提交
本文由 简悦 SimpRead 转码, 原文地址 https://www.jb51.net/article/153382.htm 很多人在用 MyBatis 或者 通用 Mapper 时,经常会问有没 ...
- Linux环境下如何计算CPU占用率【华为云技术分享】
1.Linux 环境下查看 CPU 信息 1.1.查看 CPU 详细信息 通过 cat /proc/cpuinfo 命令,可以查看 CPU 相关的信息: [root@rh ~]$ cat /proc/ ...
- 【linux】CentOS 查看系统时间,修改时区
===============CentOS 7.6================ 1.查看系统时间 date 查看当前系统时间以及时区结果是: Mon Jul 8 09:23:31 UTC 2019 ...
- php 获取一张图片所有点的颜色值,感觉不错转载学习
片段一 //similar_text($numStr, $val, $pre); //计算两个字符串的相似度 //print_r($pre); $imgPath = 'time.jpg'; $size ...
- JTAG接口定义
- 关于SQL server事务
- PIESDK二次开发基础视频
第0讲:PIESDKNet二次开发环境配置 第1讲:PIE产品简介及开发介绍 第2讲:PIE架构及常用控件介绍 第3讲:PIESDK常用功能实践 第4讲:XML插件配置及组件式开发界面搭建 第5讲:地 ...
- python 进程和线程-线程和线程变量ThreadLocal
线程 线程是由若干个进程组成的,所以一个进程至少包含一个线程:并且线程是操作系统直接支持的执行单元.多任务可以由多进程完成,也可由一个进程的多个线程来完成 Python的线程是真正的Posix Thr ...
- flex:1和flex:auto详解
flex:1和flex:auto详解 首先明确一点是, flex 是 flex-grow.flex-shrink.flex-basis的缩写. flex-grow属性定义项目的放大比例,默认为0,即如 ...
- 用SWFUpload上传图片小例子
在开发项目中,经常会用到上传图片,接下来我就用一种简单的方式给大家分享一下使用SWFUpload的方式上传图片. 1.在网站根目录下新建一个SWFUpload文件夹,把下载的组建放在SWFUpload ...