Day04-浮动

一. 本节课学习目标。

1. 掌握浮动的作用以及用法。
2. 了解浮动产生的问题。
3. 掌握清除浮动的方法。
4. 能够通过html，css，盒模型，浮动进行复杂网页布局。
   二. 浮动。
5. 作用。
   解决块级元素同行排版问题。（解决网页的布局中左右布局的问题）
   Ps: 块级元素默认独占一行，不能再同一行显示。
6. 实现方式。
   在元素中添加float属性，left和right。
7. 浮动原理。
   3.1 当一个元素浮动时，会和其他元素在同一行显示，并且会提升层级。
   3.2 当一个元素浮动时，该元素的位置是由上一个浮动元素的位置决定的。如果上一个浮动元素的后边有足够空间，则在同一行显示，没有足够空间 会在下一行显示。
   3.3 当一个浮动元素被挤到下一行显示时，它的位置根据该元素的浮动方向和上一个相同浮动发现的元素决定。
   比如：元素左浮动，它的位置和上一个左浮动的元素决定，被挤到下一行的元素的上边界挨着上一个左浮动元素的下边界。
   元素右浮动，它的位置和上一个右浮动的元素决定，被挤到下一行的元素的上边界挨着上一个右浮动元素的下边界。
   3.4 当一个元素浮动之前没有其他元素浮动，那么元素基于自己所在的行浮动。
   三. 浮动产生的问题以及解决办法。
8. 影响兄弟元素布局。
   当元素浮动时，脱离了正常的文档流，提升了层级。
9. 父元素高度塌陷。
   原因：父元素的子元素浮动时，脱离文档流，父元素就获取不到子元素的高度，父元素的高度就没有了。
   解决：在父元素中添加overflow:hidden。
   四. 浮动练习1-左右布局。
   效果图：
   
   代码如下:
   五. 浮动练习2-左中右布局。
   效果图：
   
   代码如下:
   六. 浮动练习3-12宫格布局。
   效果图：
   
   代码如下:
   七. 浮动练习4-韩都衣舍布局。
   效果图：
   
   代码如下:
   八. 映纷创意底部。
   效果图：
   实现代码:
   九. 怪异盒模型和雪碧图。
   标准盒模型：
   组成部分：
   1.内容部分： 由width和height决定。
   2.内填充： padding。
   3.边框： border。
   4.外间距： margin。
   一个矩形区域真正的盒模型宽度 = margin(left,right) + border(left(1),right) + padding(left(21), right) + width(100)。
   怪异盒模型：
   组成部分：
   1.内容部分： 由width和height决定。 （width = border(left,right) + padding(left,right) + 内容区域）
   2.内填充： padding。
   3.边框： border。
   4.外间距： margin。
   一个矩形区域真正的盒模型宽度 = margin(left,right) + width(border(left,right) + padding(left,right) + 内容区域)

代码：