浮动
浮动最初的使用
- 在一开始的时候浮动只是应用在图片与文字环绕上，但是由于浮动的特性，发现了浮动可以让块级元素在一行里排列展示，这是普通流所不具备的。所以慢慢的也就偏离主题，开始使用浮动来进行布局。
- 注意：浮动脱离了文档流，但是没有脱离文字流。
设置浮动
- 格式：
选择器:{float:none|left|right}; - 浮动默认的值是none没有浮动，还有左浮动和右浮动。浮动的特性是根据其最近的父元素来浮动，如果没有父元素，那么久按照body来浮动。
浮动的特性
- 浮动只会在父元素的范围内移动，并且如果父元素设置了
padding，那么子元素浮动绝对不会超出内边距的范围。 - 在设置浮动时，如果它的上一个盒子也设置了浮动，那么它们会紧靠并与上一个盒子的顶线对齐。如果上一个盒子没有设置浮动，那么会与上一个盒子的底线对齐。原因很简单，因为上一个盒子是普通流它是独占了一行的。
- 要想多个盒子在一行内显示，都需要设置浮动才行。
- （重点）浮动是脱离了标准流的，当你设置了浮动后，该块级元素就不会再度占一行位置而是浮起来。那么如果它下面的盒子是标准流，根据标准流从上往下的特性就会往上挪，占据该元素没浮动前的位置，这个时候就会出现浮动元素把下面标准流压住的效果。总结来说就是：浮动不会影响上一个标准流盒子，但是会影响下面的标准流盒子。
- 当元素设置浮动后，会自动具有行内块元素的特性，元素默认会根据内容来显示大小，但是也能设置宽高。所以在布局时，如果需要设置浮动，就不用再转换元素模式了。
- 浮动的显示顺序。当多个元素都设置了浮动时，浮动的排列位置会根据标签的书写顺序来排列。比如：1,2,3三个盒子。当你都设置了浮动，那么顺序是先1浮动位置，再2浮动位置，最后3浮动位置。
浮动的总结
- 浮动时漂浮起来的，不占位置，所以会盖在下方标准流盒子上面，其次浮动因为特性原因，也有很多的漏洞，所以要谨慎使用。
网页版心及布局流程
- 版心是指一个页面可视区域，因为你会发现每个网页它的两边都会留白，不会内容撑满整个页面，除去留白展示页面内容的位置就叫做版心。
- 布局流程
- 首先确定页面版心的宽度
- 分析每个行模块样式，以及行模块内列模块的样式
- 根据样式来书写html结构
- 初始化css。利用css+div的布局方式来书写css，实现页面效果。
- 小技巧总结：
- 如果在页面中一行的模块是两个浮动元素组成的，那么一定要有一个父元素把它们包起来，并且设置了高度有占位，这样下面的行模块才不会顶上来。同理因为父元素才有占位，所以设置外边距时，也是给父元素来设置。
- 通栏行模块尽量不要写宽，直接不写就是默认撑满，写宽的话设置padding宽度就会被影响。
