炒冷饭10

CSS浮动##

总而言之清理浮动两种方式

1. 利用 clear属性，清除浮动
2. 使父容器形成BFC

都向左浮动,父元素宽度为0

上面最后加一句

这样父元素就可以包含下面的三个子元素。

可以看出浮动后虽然绿色div布局不受浮动影响，正常布局，但是文字部分却被挤到了红色浮动div外边。要想阻止行框围绕在浮动元素外边，可以使用clear属性，属性的left，right，both，none表示框的哪些边不挨着浮动框

11111111111
11111111111

我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果

通用的清理浮动的方法

/方法1/
.clearfix{
zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
/方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}

定位##

relative 生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px。 比如:position:relative; top:20px; left:20px;
absolute 生成绝对定位的元素，相对于static定位(所以会用相对定位定位祖先元素)以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定。
比如:position:absolute; top:20px; left:20px;
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定 弹出框一般是用FIXED的定位

绝对定位宽度

绝对定位宽度是收缩的，如果想撑满父容器，可以设置 width: 100%

hello 饥人谷