任务10.浮动定位BFC边距合并

作者: LouisJ | 来源:发表于2017-12-31 22:33 被阅读0次

1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

浮动元素的特征
（1）浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
（2）浮动元素的外边缘碰到包含框或者另一个浮动元素的框的边缘会停下。
（3）如果包含块儿太窄无法容纳水平排列的多个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住。
都会其他元素的影响
（1）对于父元素，浮动元素碰到它的边框会停下，但父元素会无法察觉浮动元素的存在，如果没有其他内容，父元素会产生高度塌陷。
（2）对于普通元素，察觉不到浮动的元素的存在，浮动元素会覆盖普通元素。
（3）对于文字，会察觉到浮动元素的存在，围绕在浮动元素周围。

2.清除浮动指什么? 如何清除浮动? 两种以上方法

（1）使用clear属性
例如，不想让一个元素左边有向左浮动的元素，设置clear：left即可

（2）解决父元素高度塌陷问题

  .clearfix:after{
      content:"";
      display:block;
      clear:left;   /*IE8以后的浏览器的用法*/
  }

static
默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
relative
属性：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
参考点：自身，例如，设置position：relative后，添加left：20px，会在元素本身的位置的左边增加20px
使用场景：页面上防止了一个icon，但由于icon裁剪不是很好，没对齐，可以通过relative进行偏移
absolute
属性：生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定
参考点：距离最近的非static定位祖先元素，如果没有，就逐层网上寻找，直到寻找到html这个根元素为止
使用场景：相对于某一特定元素进行定位时
fixed
属性：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定
参考点：相对于浏览器窗口
使用场景：需要将某个元素固定在窗口中的某个位置时使用
sticky
属性：CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置

作用：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
使用方法：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
代码：

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

效果：

z-index效果

区别：使用relative是元素偏移时，元素只是形式上发生偏移，但这个元素在文档流中存在的位置并没有改变，与其他元素排列时还是按正常的元素来排列；而对于margin，直接让元素所占的位置发生了变化。

relative偏移

margin偏移

BFC含义：BFC的全称是[Block Format Content]（块级格式化上下文），使元素形成独立的与其他块隔离的容器，容器里面的子元素不会影响到外面的元素。
生成BFC，将属性设置为下列所示
- float为 left|right
- overflow为 hidden|auto|scroll
- display为 table-cell|table-caption|inline-block
- position为 absolute|fixed
作用：
- BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠

margin合并
PS：同一个BFC子元素和父元素margin合并

添加padding

说明：添加padding后子元素和父元素的margin不合并，相当于有一个界限将两个margin分开了，不产生合并

本文标题：任务10.浮动定位BFC边距合并

本文链接：https://www.haomeiwen.com/subject/yfhagxtx.html