css float浮动属性详解

浮动的标签可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
浮动标签不占文档的普通流空间
float浮动样式

1、left：向左浮动

2、right：向右浮动

3、none：取消浮动

如果一个父级标签的子元素浮动后，在没有设置父级标签高度情况下，父级标签的内容高度无法被子元素撑开，导致文档普通流布局不正常，此时应该设置父级标签overflow: hidden;样式，一般情况下不能设置父级标签高度，因为设置了父级标签高度就不能自适应子元素的内容

css部分

   .box{
      padding: 30px;
      border: 1px solid #006DFD;
      overflow: hidden; /*忽略子标签浮动后，子标签无法撑开父标签的影响*/
    }
    .box>.child1{
      width: 200px;
      height: 200px;
      background-color: #fce876;
      float: left;
    }
    .box>.child2{
      width: 200px;
      height: 200px;
      background-color: #aa6c3d;
      float: right;
    }
  	

html部分

<div class="box">
	<div class="child1">子元素1</div>
	<div class="child2">子元素2</div>
</div>

position定位

static普通流定位(默认)，其中top，right，bottom，left无效
relative相对自身定位，保留文档流占位空间

1、top: 10px; 表示相对自身偏移上边10px

2、right: 10px; 表示相对自身偏移右边10px

3、bottom: 10px; 表示相对自身偏移下边10px

4、left: 10px; 表示相对自身偏移左边10px

absolute相对于含有relative，absolute，fixed，sticky父标签的绝对定位，不保留文档流占位空间

1、top: 10px; 表示相对于含有relative的父标签偏移上边10px

2、right: 10px; 表示相对于含有relative的父标签偏移右边10px

3、bottom: 10px; 表示相对于含有relative的父标签偏移下边10px在这里插入代码片

4、left: 10px; 表示相对于含有relative的父标签偏移左边10px

fixed相对于浏览器窗口固定定位，不会随着滚动条移动，不保留文档流占位空间
1、top: 10px; 表示相对于浏览器窗口偏移上边10px

2、right: 10px; 表示相对于相对于浏览器窗口偏移右边10px

3、bottom: 10px; 表示相对于相对于浏览器窗口偏移下边10px

4、left: 10px; 表示相对于相对于浏览器窗口偏移左边10px

sticky相对于浏览器窗口黏贴定位，保留文档流占位空间
1、top: 10px; 表示距离浏览器窗口偏移上边10px后固定标签位置

css部分

.box1{
  position: relative;
  left: 100px;
  top: 200px;
  width: 300px;
  height: 200px;
  background-color: #A16171;
}
.box2{
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #c376fe;
}
.box2>.box2-child{
  position: absolute;
  top: 20px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: #c376fe;
}
.box3{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #87facc;
}
.box4{
  position: sticky;
  top: 0;
  width: 100%;
  height: 40px;
  background-color: #a887ce;
}

html部分

  <div class="box1">relative</div>
    <div class="box2">
      <div class="box2-child">absolute</div>
    </div>
    <div class="box3">fixed</div>
    <div class="box4">sticky</div>