盒模型与CSS浮动

一、盒模型组成

内容 - 框的内容，其中显示文本和图像。

内边距 - 清除内容周围的区域。内边距是透明的。

边框 - 围绕内边距和内容的边框。

外边距 - 清除边界外的区域。外边距是透明的

1.内容（content）：指定内容的大小（注意：行内元素不支持设置宽度和高度）

2.边框（border）：指定一个元素边框的样式、粗细、颜色（注意：边框会影响盒子的实际大小）

           语法： border:border-width | border-style | border-color

3.内边距（padding）：边框与内容之间的距离

4.外边距（margin）：控制盒子和盒子之间的距离

属性：

margin-left：左外边距

margin-right：右外边距

margin-top：上外边距

margin-bottom：下外边距

margin:复合写法

 5.盒模型相关属性

box-sizing：用来设置盒子尺寸的计算方式

outline：用来设置元素的轮廓线

box-shadow：用来设定值元素的阴影效果

border-radius：用于设变边框的圆角

二、css浮动

 1.语法规则

选择器{

  float:属性值

}

属性值：

none:元素不浮动

left:元素左浮动

right:元素右浮动

 2.浮动元素的特性

a.   浮动元素会脱离标准流(脱标)

b.   浮动的多个元素会一行内显示并且元素顶部对齐

c．浮动的元素会具有行内块元素的特性

3.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。(注意：浮动的元素是互相贴靠在一起的(不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。)

4. 浮动元素回具有行内块元素特性

a.如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

b.浮动的盒子中间是没有缝隙的，是紧挨着一起的

c.行内元素同理

5.需要清除浮动的原因

a.由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

b.由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

d.语法规则

选择器{

  clear:属性值

}

属性值：

left:清除左侧浮动的影响

right:清除右侧浮动的影响

both:同事清除左右两侧浮动的影响