css布局中的BFC
1、BFC的区域会与float的元素区域重叠
2、计算BFC的高度时,浮动子元素也参与计算
3、BFC就是页面上的一个隔离的独立容器,容器里面的子元素是不会影响到外面的元素
4、BFC意为”块级格式化上下文”
答案:1
解析:
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。
BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素。所以,避免margin穿透啊,清除浮动什么的也好理解了。
什么时候会触发BFC呢?
常见的如下: float的值不为none。 overflow的值为auto,scroll或hidden。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
css布局中的BFC的更多相关文章
- 认识和理解css布局中的BFC
认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- CSS布局中的水平垂直居中
CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
- DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...
- CSS布局中最小高度的妙用
CSS布局中最小高度的妙用 --最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持B ...
- CSS布局中——导航是非常常见的
导航绝对是页面布局中最常见的,为了不用每次去写,稍微贴个简单的导航模版出来,方便以后使用. <title>CSS菜单</title> <style type=" ...
- CSS布局中一个简单的应用BFC的例子
什么是BFC BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则.例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子 ...
随机推荐
- 极简 Node.js 入门 - 5.1 创建 HTTP 服务器
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- Termux基础教程(一):技能部署
Termux基础教程 by CUCI Termux 是一个 Android 下一个高级的终端模拟器,开源且不需要 root,支持 apt 管理软件包,十分方便安装软件包,完美支持 Python. PH ...
- 2020年9月程序员工资统计,平均14459元!你给程序员拖后腿了吗?https://jq.qq.com/?_wv=1027&k=JMPndqoM
2020年9月全国招收程序员362409人.2020年9月全国程序员平均工资14459元,工资中位数12500元,其中95%的人的工资介于5250元到35000元. 工资与上个月持平,但是岗位有所增加 ...
- 【水】怎么在 HZOI 上水到更高的分
前言 这些东西在联赛并用不了 预编译优化 40行优化 #define _CRT_SECURE_NO_WARNINGS #pragma GCC optimize(2) #pragma GCC optim ...
- linux下php安装php-kafka扩展和php-rdkafka扩展
具体步骤: 1.安装librdkafka cd /usr/local/src #进入安装包存放目录 wget https://github.com/edenhill/librdkafka/archi ...
- mysql锁 转
参考文章:https://blog.csdn.net/puhaiyang/article/details/72284702 一.mysql锁的结构图 如上图所示,针对mysql的innodb存储引擎, ...
- centos6.8 Mysql-5.7.20 升级 mysql-8.0.14-1
Mysql-5.7.20 升级 mysql-8.0.14-1 操作前建议先查阅以下网页初步了解Mysql版本升级信息 https://blog.csdn.net/u012946310/artic ...
- solr之functionQuery(函数查询)【转】
函数查询 让我们可以利用 numeric域的值 或者 与域相关的的某个特定的值的函数,来对文档进行评分. 怎样使用函数查询 这里主要有两种方法可以使用函数查询,这两种方法都是通过solr http 接 ...
- cookie和session可以参考的文章
cookie和session可以参考的文章 cookie:http://www.lemfix.com/topics/5session:https://www.cnblogs.com/nickjiang ...
- JS对象的各种操作
对象由若干键值对组成 属性 都是为字符串类型,值 就可以为任意类型 var xiaoming= { name: '小明', 'school': 'No.1 School' }; 访问对象里面的属性,可 ...