6.css-浮动

1.网页布局方式

网页布局方式其实就是浏览器如何对网页中的元素进行排版的，共分为有三种，分布是文档流排版方式、浮动流排版方式、定位流排版方式。

1.文档流排版方式：文档流又称为标准流和普通流。

         1.1浏览器默认的就是文档流；

         1.2在标准流中，css将元素分为三类，分别是块级元素、行内元素、行内块级元素；

         1.3在标准流中，排版方式有二，一是水平排版（行内元素和行内块级元素），二是垂直排版（块级元素）。

2.浮动流排版方式：

          2.1浮动流是水平排版，但没有居中对齐，也就是时候没有center这个属性；

          2.2浮动流是不可以使用margin:0,auto;的

          2.3浮动流是不区分块级元素、行内元素行内块级元素的，也就是说在浮动流中，所有的元素都可以设置宽高，综上所述，浮动流排版即是水平排版，又可以设置宽高，很像文档流里面的inlineblock元素，但是如果说有一个需求是给两个div分布布局在网页的左右两侧，若使用标准流的inlineblock，就要设置其margin值，但这只不过是一个“假象”，此时若改变网页的宽度，这个“假象就会暴露出来”。

3.定位流排版方式

看后面的定位。

2.浮动元素排序规则

1.相同方向上的浮动元素，先浮动的排在前面，后浮动的排在后面；不同方向上的浮动元素，左浮动找左浮动，右浮动找右浮动；浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置所决定。这句话怎么理解呢？看两个场景：                 <div id="div1"></div><div id="div2"></div>这两个div中，若把前面的div为浮动，后面的div是标准流排版，那么前面的div就会飘在后面的div上面，其实现过程是：首先看前面的div，一看是浮动，就把它从标准流中拿走，后面的div2就挤上去，再看div2，div2是标准流，那么就不动它，最后div1发现它浮动之前所在标准流是第一行，那么就飘在div2上面；第二个场景同样有这样两个div，不同的是把后面的div改为浮动，那么首先看div1，没有浮动，那么就不动它，再看div2，浮动，拿走，再看，没了，那就再把div浮动上去，那么浮动到哪呢？看div2浮动前是在哪呢，浮动前在第二行，那就只能浮动到第二行了。

2.浮动元素贴靠现象

什么叫做浮动元素的贴靠现象？场景：一个父div有三个子div，分别是大哥，二弟，三弟，父div有宽有高，子div同样有宽有高，这个时候三个div按照大哥、二弟、三弟从左到右排序，有一天，某个子div吃胖了，宽度变大了，父div的宽度已经不能容下三个子div的宽度，三弟就会被挤下去，不和二哥相邻了，去跟大哥相邻，过了两天，三弟和大哥其中一人也吃胖了，他们两个的宽度也超过了父div，那么三弟就离开了大哥直接和父亲相邻，这个时候无论自己的宽度是否超过了父亲，都要跟父亲挨着。总结一下就是浏览器会尽力保证浮动元素在它的父元素里完整显示。

 

3.什么叫浮动的字围现象？就是脱标的标签并不能覆盖着它身下标签的文字，即

3.总结

在企业开发中，垂直排版使用标准流，水平排版使用浮动流。比如说下图这个中间那一块，首先左右，使用浮动流，然后右边又分上下，使用标准流，上又分左右，使用浮动流，左又分上下，使用标准流。一层一层地来就简单多了。