CSS之⑰浮动·总结

                         QQ:3020889729                                                                                 小蔡

浮动属性

例子：

.nav1 {
	float:left;
	width: 60px;
	height: 20px;
	background-color: red;
}
.nav2 {
	 float:right;
	 width: 60px;
	 height: 20px;
	 background-color: black;
}
//调用
<div>
<div class="nav1">
  红盒子
</div>
<div class="nav2">
  黑盒子
</div>
</div>

效果：（效果相当于把一个块元素，展现出了行内块元素的效果，在同一行显示（记得制定子盒子大小））

浮动属性值介绍

• float:right;——靠左浮动
• float:left;——靠右浮动

提醒一下：
浮动属性添加后，该元素将脱标——也就是脱离标准模块，而是属于浮动的模块/元素。
这时候再添加一个标准盒子，将会出现在浮动模块下——因为浮动不会占用标准模块的位置，所以，当后边出现标准模块，就会很自然地填补回去。
例子：

  .check {
      height: 100px;
      background-color: white;
  }
  .nav1 {
    float:left;
    width: 60px;
    height: 20px;
    background-color: red;
  }
  .nav2 {
    float:right;
    width: 60px;
    height: 20px;
    background-color: black;
  }
//调用
<div>
    <div class="nav1">
      红盒子
    </div>
    <div class="nav2">
      黑盒子
    </div>
    <div class="check">
    </div>
  </div>

效果：

多浮动排布时的排布基本规则

当一个父盒子宽度不足以放入多个浮动盒子时，它会另起一行

css：

.nav1 {
      float:left;
      width: 60px;
      height: 20px;
      background-color: red;
    }

多个浮动放在一个有限盒子的效果：

多个浮动默认相近排放，添加间隔可使用margin添加外边距

第二个盒子添加一个样式属性：margin-left: 20px;