浮动

2017-06-27 本文已影响0人 BAMO

先了解什么是文档流：文档是html元素在页面中排列布局的方式，块状元素自上到下排列，行内元素由左到右排列。
浮动（float）：可以让元素脱离文档流，浏览器渲染时感知不到它的存在，就好像浮在上面的感觉！浮动的值有：float： top | right | bottom | left; 对一个元素进行的float设置，可以对其上、右、下、左设置。
浮动的定义（w3c）: 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
影响：
-父容器：父容器框就是浮动元素的包含框就是浮动框碰到它就会停止。

Paste_Image.png

对父元素的所有子元素进行了浮动，其内容会塌陷(如下图所示)

Paste_Image.png

浮动的特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
-方法：
1.添加空标签
2.父元素设置overflow：hidden；

相对定位（position：relative；）：相对其元素本身进行定位，原来所占据的文档流位置不变，紧紧是可视化排列布局发生了位置便宜；可对top、right、left、bottom进行设置。
绝对定位（position：absolute；）：相对于第一个非static父元素进行绝对定位；如果一直没有找到父元素，则根据根节点html元素进行定位，对于设置绝对定位的元素脱离了文档流，可对top、right、bottom、left进行设置。
固定定位（position： fixed；）：相对窗口（viewport）进行定位；脱离文档流，可对top、right、bottom、left进行设置。

所有浏览器都支持z-index属性，其设置的是元素的堆叠顺序，拥有更高的堆叠顺序的元素处于拥有低顺序的前面，可设置为负的。

Question5：position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

position:relative:

Paste_Image.png

负margin：

Paste_Image.png
根据以上两图可以看出使用负margin进行偏移的文档流发生了变化即后面的元素排列布局也会随之发生变化。

Paste_Image.png

BFC即Block Formatting Context的缩写，中文译为块级格式化上下文。它是一个独立渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
1.内部的box会在垂直方向一个接一个地放置。
2.box垂直方向的距离有margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。
3.每个元素的margin box的左边，与包含块border box的左边相互接触。即使浮动也是一样。
4.bfc就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此。
5.bfc区域不会与float box重叠。
6.bfc就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此。
7.计算bfc的高度时，浮动元素也参与计算。
能生成BFC的元素：
1.根元素 html
2.float属性不为none
3.position为absolute或者fixed
4.display为inline-block ,table-cell,flex,inlin-flex,(flex是弹性布局的意思)
5.overflow不为visible
作用：
1.自适应两栏布局
第一栏设置了浮动，两栏局域发生了重叠，要让第二栏不与浮动元素重叠，把它变为BFC即可.

Paste_Image.png