CSS浮动##
总而言之清理浮动两种方式
- 利用 clear属性，清除浮动
- 使父容器形成BFC
都向左浮动,父元素宽度为0
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
上面最后加一句<div style="clear:both;"></div>这样父元素就可以包含下面的三个子元素。
可以看出浮动后虽然绿色div布局不受浮动影响，正常布局，但是文字部分却被挤到了红色浮动div外边。要想阻止行框围绕在浮动元素外边，可以使用clear属性，属性的left，right，both，none表示框的哪些边不挨着浮动框
<div style="border: solid 5px #0e0; width: 250px;">
<div style="height: 50px; width: 50px; background-color: Red; float:left;"></div>
<div style="height: 100px; width: 100px; background-color: Green; clear:both;">
11111111111
11111111111
</div>
</div>
我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果
<div style="border: solid 5px #0e0; width:300px;overflow:hidden;">
通用的清理浮动的方法
/方法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%
<div style="position: absolute; background: red">
hello 饥人谷
</div>
