盒子模型、浮动（float）

盒子模型

盒子模型组成

边框（border）

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框样式
border-color	边框颜色

solid：实线边框
dashed：虚线边框
dotted：点线边框

border-collapse: collapse;//合并相邻的边框

外边距

外边距可以让盒子水平居中
盒子必须指定宽度。
盒子左右的外边距都设置为auto。
行内或者行内块元素水平居中给其父元素添加text-align:center即可。

圆角边框

border-radius:length;

盒子阴影

box-shadow

浮动（float）

网页布局准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
浮动特性：
1、浮动元素会脱离标准流。
2、浮动的元素会一行显示并元素顶部对齐。
3、浮动的元素会具有行内块元素的特性。
浮动的盒子不再保留原先的位置。
多个盒子设置了浮动，会按照属性值一行内显示并且顶端对齐排列。
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

清除浮动

清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不影响下面的标准流了。
清除浮动：clear: both;
清除浮动的方法：
1、额外标签法也称为隔墙法
2、父级添加overflow属性
3、父级添加afer伪元素
4、父级添加双伪元素

额外标签法

加

.clear{clear:both;}
注：要求这个新的空标签必须是块级元素。

父级添加overflow

给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

:afer伪元素法

.clearfix:after{
     
   content: "";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}
.clearfix{
     
   *zoom: 1;
}

双伪元素清除浮动

.clearfix:before,.clearfix:after{
     
   content: "";
   display: table;
}
.clearfix:after{
     
   clear: both;
}
.clearfix{
     
   *zoom: 1;
}