浮动 float
取值
right/left:元素向右/左浮动。
注意
- 元素设置为浮动之后，就可以设置宽高(如下图所示：li元素的宽高)
- 元素设置为浮动之后，会脱离文档流，在文档中不占位。（即漂浮在文档流的上方,height为0）
- 元素浮动之后，后边的正常元素会上移，占据原本浮动元素所在的位置（如图中所示，li元素浮动之后，后面的div元素会上浮，占据了浮动元素的位置，使其呈现浅的粉色）
- 多个元素同时左浮或者右浮，浮动元素会停靠在前一个元素的边缘位置（如图中所示的4个li元素，改变了以前占据一行的属性，改变为紧靠前一个元素的边缘）
- 如下图
<style type="text/css">
body{margin:0;}
#nav,#main{width: 800px;margin:0 auto;}
#nav{background-color: springgreen;
/*父元素指定高度*/
/*height:50px;*/
/*overflow:hidden;*/
}
#nav ul{list-style: none; padding: 0px;margin:0px;}
/*将li元素设置为浮动并且规定宽高便可同行显示，背景颜色设置为白色，透明度为0.3*/
#nav li{float:left;width:200px;height:50px;background-color: rgb(255,255,255,0.3);
line-height: 50px;text-align: center}
/*浮动元素之后的div元素*/
#main{height:500px;background-color: pink;}
/*p{clear: both;}*/
</style>
<body>
<div id="nav">
<ul>
<li>我的博客</li>
<li>博客首页</li>
<li>文章列表</li>
<li>时间轴</li>
</ul>
<p></p>
</div>
<div id="main"></div>
</body>
效果如下图所示
- 元素设置为浮动之后，就可以设置宽高(如图所示：li元素的宽高)
- 元素设置为浮动之后，会脱离文档流，在文档中不占位。（即漂浮在文档流的上方）
- 元素浮动之后，后边的正常元素会上移，占据原本浮动元素所在的位置（如图中所示，li元素浮动之后，后面的div元素会上浮，占据了浮动元素的位置，使其呈现浅的粉色）
- 多个元素同时左浮或者右浮，浮动元素会停靠在前一个元素的边缘位置（如图中所示的4个li元素，改变了以前占据一行的属性，改变为紧靠前一个元素的边缘）
浮动元素对父元素的影响
由于浮动元素在文档中不占位，一旦子元素全部浮动，父元素的高度变为0，影响父元素背景颜色，背景图片的显示，影响后面其他元素的布局
- 解决办法（如图中所示：或者添加p元素或者设置父元素div的高度或者设置overflow:hidden）
- 指定父元素的高度
- 父元素中设置overflow:hidden
- 父元素之后添加空的块元素，并且设置clear:both
定位布局 position
1 定位布局
属性：top/bottom/right/left
作用：配合已经定位的元素进行位置移动
取值：像素值
1.top:以元素的上边界为基准移动元素
2.bottom:以元素的下边界为基准移动元素
3.right:以元素的右边界为基准移动元素
4.left:以元素的左边界为基准移动元素
2 定位方式
相对定位 position:relative
元素采用相对定位时，会参照它在文档中原来的位置进行偏移。（子元素需要绝对定位时，常用于祖先元素的设置）
绝对定位 position:absolute
- 特点
- 绝对定位的元素，会脱离文档流，元素在文档中不占位
- 绝对定位的元素，会参照离他最近并且已经定位的的祖先元素，进行偏移
- 如果没有已经定位的祖先元素，则元素会参照body进行定位
- 注意
- 元素一旦设置为绝对定位，就可以设置宽高了；
- 经常使用“父相子绝”的布局方式，即父元素采用相对定位以方便子元素的绝对定位
- 浮动与绝对定位都可以使元素脱流：float+调整margin 等价于 absolute+偏移属性
- 浮动与相对定位是可以共存的，设置相对定位只是为了方便子元素的定位布局
- 堆叠次序
*设置 已定位元素的z-index值，值越大，排序位置越靠上。
注：永续都是子元素在上，父元素在下，不受z-index值影响。
固定定位 position:fixed
作用：使元素定位在浏览器窗口的某个位置
- 注意：
- 固定定位的元素是参照浏览器窗口的位置进行定位
- 设置固定定位之后的元素为块元素
绝对定位与相对定位的例子如下
<style type="text/css">
body{margin:0;}
#box{width: 300px;height:300px;background-color: plum;
margin-top:50px;margin-left: 50px;position:relative;
top:50px;left: 50px;}
.d1{width:50px;height:50px;background-color: pink;
position:absolute;top:50px;left:50px;}
h1{margin-top: 40px;background-color: orange;}
</style>
<body>
<div id="box">
<div class="d1"></div>
</div>
<h1>一级标题</h1>
</body>
效果如下图所示
id为box的div元素设置为相对定位之后，在原本的位置上，分别向下，向右分别偏移50px;
而class为d1的div元素则以父元素"#box"的基础上，分别向下，向右分别偏移50px;
h1的一级标题则按照紫色快的原来位置进行定位
