一、关于position
流定位:不能通过left/top属性来进行定位(那用什么定位),上下排列的元素纵向边距会被合并,左右元素横向边距不会合并。
浮动定位:脱离文本流,就好像不在父元素中,像是浮在父元素的上方。
相对定位:相对自身位置定位,不会脱离文本流,相当于是个参照物,给子代元素作为参照。
绝对定位:脱离文本流,不占据空间,相对于最近的有定位属性的祖籍元素定位。
固定定位:相对于窗口进行定位。

二、BFC 块级格式化上下文
BFC会阻止垂直外边距的折叠,对于的嵌套元素来说,只要将父元素设置BFC就不会和父元素的margin重叠了

(这么牛X怎么实现BFC)

形成条件:
float:left/right
overflow:hidden/auto/scroll
display:inline-block
position:absolute/fixed

常见的清除浮动的方法
1、

zoom:1;
after{
content:" ";
display:block;
height:;
visibility:hidden;
clear:left;
}

2、

zoom:1;
after{
content:"";
display:table;
clear:borth;
}

清除浮动只有两种方式,一种是用clear清除浮动,二是使用父级元素形BFC。

position和BFC的更多相关文章

  1. 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)

    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...

  2. BFC引发的关于position的思考

    BFC布局规则: 内部的Box会在垂直方向,一个接一个地放置. Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边, ...

  3. CSS篇-dispaly、position、定位机制、布局、盒子模型、BFC

    display常用值 参考链接英文参考链接中文 // 常用值 none:元素不显示 inline:将元素变为内联元素,默认 block:将元素变为块级元素 inline-block:将元素变为内联块级 ...

  4. 深入理解BFC

    定义 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是格式化上 ...

  5. “fixed+relative==absolute”——对BFC的再次思考

    好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求 昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...

  6. 关于CSS inline-block、BFC以及外边距合并的几个小问题

    CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...

  7. 我对BFC的理解

    最初这篇文章打算回答寒冬大神的第一问,谈谈CSS布局.本来呢我以为布局主要涉及float跟display相关属性,以及他们的包含框.静态位置等等.后来看了大神的一片面试文章,嗯?这里怎么还有个BFC, ...

  8. CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  9. 前端精选文摘:BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

随机推荐

  1. JavaScript中实现DI的原理

    什么是依赖注入 按照上面图的流程中我们可以知道我们需要实现这么几件事: 提供一个服务容器 为目标函数注册需要的依赖 获取目标函数注册的依赖项 通过依赖项来查询对应服务 将获取的依赖项传入目标函数 提供 ...

  2. ES6学习笔记(一)

    ‘变量’声明 ES6新增两个声明’变量’的关键字,let和const命令. l  let用来声明局部变量 同ES5中var声明的变量不同的是,let声明的变量的作用域范围仅仅是从其声明的地方开始,到其 ...

  3. Linux 下载百度网盘大文件

    Linux 下没有百度网盘客户端,用浏览器下载速度慢得急死人 鼠标移到链接处, 右键, 然后复制链接 接着在终端里输入 axel -n 50 -o filename.ext “粘贴链接到此处” axe ...

  4. javascript 匿名函数及闭包----转载

    网上很多解释,我无法理解,我想知道原理...这篇文章应该可以透彻一点Query片段:view plaincopy to clipboardprint? (function(){      //这里忽略 ...

  5. 如何阅读 Redis 源码?ZZ

    原文链接 在这篇文章中, 我将向大家介绍一种我认为比较合理的 Redis 源码阅读顺序, 希望可以给对 Redis 有兴趣并打算阅读 Redis 源码的朋友带来一点帮助. 第 1 步:阅读数据结构实现 ...

  6. Linux-->Mysql:安装,测试

    环境准备 mysql下载地址:https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.19-linux-glibc2.12-x86_64.tar ...

  7. Asp.net让某一页设置成gb2312或utf-8的方法

    有些需求,一定要用到utf-8格式,在web.config里面设置<globalization             requestEncoding="utf-8"     ...

  8. Realtek无线网卡对于Ubuntu的WiFi不支持的处理办法

    1.应急办法:查询rfkill list all,可以看到ideapad_laptop的无线被物理关闭,可是博主的笔记本根本没这个键位,所以执行sudo modprobe -r ideapad_lap ...

  9. vue + element-ui 制作下拉菜单(可配置路由、可根据路由高亮list、可刷新自动展开定位路由)

    本篇文章分享一篇关于 vue制作可路由切换组件.可刷新根据路由定位导航(自动展开).可根据路由高亮对应导航选项 一.实现的功能如下: 1.可折叠导航面板 2.点击导航路由不同组件           ...

  10. June 19th 2017 Week 25th Monday

    Everyone is dissatisfied with his own fortune. 人对自己的命运总是感到不满足. We always want more, even when we hav ...