一、 网页的布局方式
1、 什么是网页的布局方式？
- 网页的布局方式就是指流浪器是如何对网页的元素进行排版的
2、 网页的布局方式
2.1 标准流/文档流/普通流排版方式
- 浏览器的默认的排版方式就是标准流排版方式
- 在css中将元素分为三类，分别是块级元素/行内元素/行内块级元素。
- 在标准流中有两种排版方式，一种是垂直排版，一种是水平排版。
垂直排版：如果是块级元素，那么就是垂直排版。
水平排版：如果是行内元素，那么就是水平排版。
2.2 浮动流排版方式
2.2.1 浮动流是一种“半脱离标准流”的排版方式
2.2.2 浮动流只有一种排版方式，就是水平排版，它只能设置某个元素在他的父元素中左对齐或者右对齐。
- 注意点：浮动流中没有居中对齐，也就是没有center取值。
- 注意点： 在浮动流中是不可以使用margin:0 auto的。
- 特点：在浮动流中是不区分块级元素和行内元素还是行内块级元素的，无论是块级还是行内还是行内块级元素。
- 特点：在浮动流中，无论是块级元素/行内元素/行内块级元素都可以设置宽高。
- 综上所述：浮动流中的元素和标准流中的行内块级元素很像。
float:left;
二 ，浮动元素脱标
- 什么是浮动元素脱标？
- 脱标：脱离标准流。所有元素都可以脱标。
- 当某一个元素浮动之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标。
- 如果前面一个元素浮动了，而后面一个元素没有浮动，那么这个时候前面的一个元素就会盖住后面的一个元素。
三、浮动元素的排序规则
1、 相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面。
2、不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动。
3、浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定。
贴靠原则
浏览器会让所有的元素在父元素中完整展示，如果有覆盖的情况，那么会触发贴靠原则。也就是寻找要贴靠的元素的前一个元素，如果没有，就寻找父元素进行贴靠。
写代码思维方式
- 企业开发中什么时候使用标准流什么时候使用浮动流？
- 垂直方式使用标准流，水平方向使用浮动流
- 拿一个很复杂的界面如何入手？
- 从上到下布局
- 从外到内布局
- 水平方向可以划分为一左一右再对左边或者右边进行一步布局
