浮动

浮动最初的使用

• 在一开始的时候浮动只是应用在图片与文字环绕上，但是由于浮动的特性，发现了浮动可以让块级元素在一行里排列展示，这是普通流所不具备的。所以慢慢的也就偏离主题，开始使用浮动来进行布局。
• 注意：浮动脱离了文档流，但是没有脱离文字流。

设置浮动

• 格式：选择器:{float:none|left|right};
• 浮动默认的值是none没有浮动，还有左浮动和右浮动。浮动的特性是根据其最近的父元素来浮动，如果没有父元素，那么久按照body来浮动。

浮动的特性

• 浮动只会在父元素的范围内移动，并且如果父元素设置了padding，那么子元素浮动绝对不会超出内边距的范围。
• 在设置浮动时，如果它的上一个盒子也设置了浮动，那么它们会紧靠并与上一个盒子的顶线对齐。如果上一个盒子没有设置浮动，那么会与上一个盒子的底线对齐。原因很简单，因为上一个盒子是普通流它是独占了一行的。
• 要想多个盒子在一行内显示，都需要设置浮动才行。
• （重点）浮动是脱离了标准流的，当你设置了浮动后，该块级元素就不会再度占一行位置而是浮起来。那么如果它下面的盒子是标准流，根据标准流从上往下的特性就会往上挪，占据该元素没浮动前的位置，这个时候就会出现浮动元素把下面标准流压住的效果。总结来说就是：浮动不会影响上一个标准流盒子，但是会影响下面的标准流盒子。
• 当元素设置浮动后，会自动具有行内块元素的特性，元素默认会根据内容来显示大小，但是也能设置宽高。所以在布局时，如果需要设置浮动，就不用再转换元素模式了。
• 浮动的显示顺序。当多个元素都设置了浮动时，浮动的排列位置会根据标签的书写顺序来排列。比如：1,2,3三个盒子。当你都设置了浮动，那么顺序是先1浮动位置，再2浮动位置，最后3浮动位置。

浮动的总结

• 浮动时漂浮起来的，不占位置，所以会盖在下方标准流盒子上面，其次浮动因为特性原因，也有很多的漏洞，所以要谨慎使用。

网页版心及布局流程

• 版心是指一个页面可视区域，因为你会发现每个网页它的两边都会留白，不会内容撑满整个页面，除去留白展示页面内容的位置就叫做版心。
• 布局流程
  • 首先确定页面版心的宽度
  • 分析每个行模块样式，以及行模块内列模块的样式
  • 根据样式来书写html结构
  • 初始化css。利用css+div的布局方式来书写css，实现页面效果。
• 小技巧总结：
  • 如果在页面中一行的模块是两个浮动元素组成的，那么一定要有一个父元素把它们包起来，并且设置了高度有占位，这样下面的行模块才不会顶上来。同理因为父元素才有占位，所以设置外边距时，也是给父元素来设置。
  • 通栏行模块尽量不要写宽，直接不写就是默认撑满，写宽的话设置padding宽度就会被影响。