position和BFC

xiongzenghui 发布于2019-04-23 13:41 / 2797人阅读

摘要：相对定位相对自身位置定位，不会脱离文本流，相当于是个参照物，给子代元素作为参照。绝对定位脱离文本流，不占据空间，相对于最近的有定位属性的祖籍元素定位。固定定位相对于窗口进行定位。

一、关于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:0;
    visibility:hidden;
    clear:left;
}

2、

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

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

GPU云服务器云服务器 float和position bfc bfc布局 position()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2219.html

CSS中重要的BFC

摘要：中有个重要的概念，搞懂可以让我们理解中某些原本诡异的地方。简介在解释之前，先说一下文档流。我们常说的文档流其实分为定位流浮动流普通流三种。使用包含浮动元素注意，这里触发并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。 CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位...

plus2047 2019-08-29 14:20 评论0 收藏0
《CSS世界》笔记四：流的保护与破坏

摘要：和可以看作是同父异母的兄弟关系。例子如下结果如下而父元素设置属性的方式则是利用了的特性下面将会详细讲解结界全称为，中文为块级格式化上下文。上一篇：《CSS世界》笔记三：内联元素与对齐下一篇：《CSS世界》笔记五：CSS层叠规则及元素隐藏写在前面原本博客名为浮动与定位，但是《CSS世界》第六章节的内容不仅有浮动定位，很大一部分篇幅都在讲BFC和overflow。更吸引人的是，作者将...

he_xd 2019-08-29 16:20 评论0 收藏0
关于CSS中设置overflow属性的值为hidden的相关理解

摘要：非根元素，且其属性是和的元素的包含块它的包含块是由最近的祖先块容器盒的内容区域创建的。如何触发只需要保证满足下面至少一条就会触发根元素设置了值不为的元素设置了属性不为的元素设置了属性不为和的元素设置了的值为和中的任何一个的元素。作者：心叶时间：2018-04-18 17:53 包裹元素剪裁条件是不是包裹元素overflow设置为hidden以后，内部元素如果超过包裹元素的话就会被剪...

codercao 2019-08-29 15:06 评论0 收藏0
深入理解css之BFC

摘要：属性，会破坏文档流，与非定位元素很难结合起来用，因此也不适合自适应布局。，其对无感，无法自适应剩余浏览器空间。总结的定义，就如同结界一样，完全封闭对外无任何影响。引起的各种属性与自适应布局自适应布局与属性说明 BFC的定义 BFC的全称是block formatting context（块状格式化上下文），当BFC起作用的时候，其元素内部无论怎么翻江倒海都不会影响到外部元素，同样，外部...

姘搁『 2019-08-30 15:54 评论0 收藏0
CSS魔法堂：你一定误解过的Normal flow

摘要：后来终于知道是某位大神将翻译为文档流而已。。。。。。另外单纯设置效果与采用是一样的魔法堂就这个样，而浮动定位也是基于。相对定位的最强武器就是个属性了，好明显它们默认值均是。前言刚接触CSS时经常听到看到一个词文档流，那到底什么是文档流呢？然后会看到绝对定位和浮动定位能脱离文档流，从这句可以看到文档流和绝对定位、浮动定位是同一个范畴的概念，再后来在W3C标准文档找到关于Absolu...

Hancock_Xu 2019-08-30 12:56 评论0 收藏0