浮动定位以及BFC

2017-03-16 本文已影响0人 Gia_Mo

浮动元素不在文档的普通流中，可以通过设置float属性值而左右移动，直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘才停止移动。
对父容器的影响：如果父容器的子元素都是浮动元素，那么父容器会失去高度，在浮动元素之外。
对其它浮动元素的影响：如果父容器宽度不够无法容纳水平排列的全部浮动元素，那么多出的浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
对普通元素的影响：普通元素会视浮动元素不见，占据浮动元素原有的位置，但会被浮动元素遮罩。
对文字的影响：文字会感知到浮动元素的存在，会留出空间，形成环绕效果。

清除浮动是指通过设置元素的clear属性来清除设置浮动时带来的不良影响。
方法1：在父容器的最后一个子元素后添加一个空div，并对其设置样式：clear:both。
方法2： .clearfix{*zoom: 1;} .clearfix:after{content: ””; display: block; clear: both;}
方法3：利用BFC的特性

有6种定位方式：

inherit：从父元素继承；
static：默认值，没有定位，元素出现在正常的文档流中。
relative：相对定位。相对于元素本身正常位置进行定位，通过top、bottom、left、right属性来设置偏移量。使用场景：为绝对定位设定参照物或对元素自身位置进行局部调整。
absolute：绝对定位。相对于static定位以外的第一个祖先元素进行定位，若都没有则以html标签为参考进行定位。使用场景：当想让元素参照特定参照物进行定位时使用。
fixed：固定定位。生成绝对定位元素，相对于viewport进行定位。
sticky：对象在常态时遵循普通流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。

因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序，该属性值越高，元素位置越靠上。

BFC是块级格式上下文。其定义是：浮动、绝对定位（绝对定位、固定定位）元素、块级容器（如inline-block、 table-cell、table-caption）并不是块级盒子，还包括那些overflow属性值取值visible以外的块级盒子，会为它们的内容物创建一个新的块级格式化上下文。
对元素设置以下属性就可以生成BFC：
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
BFC的作用有：
1. 解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。
2. 清除浮动。因为BFC可以包含浮动，所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动。