第十五章 浮动

第119课 网页布局方式

网页的布局方式其实就是浏览器是如何对网页中的元素进行排版的

1、标准流（文档流／普通流）排版方式

1、1其实浏览器默认的排版方式就是标准的排版方式
1.2在CSS中将元素分为三类，分别是块级元素／行内元素／行内块级元素
1.3在标准流中有两种排版方式，一种是垂直排版，一种是水平排版
垂直排版，如果元素是块级元素，那么就会垂直排版
水平排版，如果元素是行内元素／行内块级元素，那么就会水平排版

2、浮动流排版方式

3、定位流排版方式

第120课 浮动流基本概念

浮动流排版方式

1、浮动流是一种“半脱离标准流”的排版方式
2、浮动流只能水平排版，只可以设置某个元素左对齐或者右对齐。

注意点
1、浮动流没有center居中对齐
2、在浮动流中是不可以使用margin：0 auto;的

特点：

1、在浮动流中不区分块级元素／行内元素／行内块级元素，都可以水平排版
2、在浮动流中不区分块级元素／行内元素／行内块级元素，都可以设置宽高
3、综上所述：浮动流中的元素和标准流中的行内块级元素很像

第121课 浮动元素脱标

元素的脱标：就是元素脱离了标准流

当某一个元素浮动之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标

影响：如果前面一个元素浮动了，而后面一个元素没有浮动，
那么这个时候前面的一个元素就会盖住后面的一个元素

第122课 浮动元素排序规则

1、相同方向上的浮动元素，先浮动的元素显示在前面，后浮动的元素会显示在后面
2、不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动
3、浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定

第123课 浮动元素贴靠现象

如果父元素的宽度小于元素的宽度，那么元素就会找他前面一个元素之前的元素，查看宽度是否合适
若果合适，贴着他前面一个元素之前的元素
如果不够，继续寻找，直到找到父元素为止

第124课 浮动元素字围现象

文字会围绕浮动元素显示

第125、126、127 课 浮动练习

垂直方向：标准流
水平方向：浮动流

1、copy 去除margin padding
2、从上到下，从外到内
3、先垂直标准流，水平浮动流
在企业开发中，垂直方向使用标准流，水平方向使用浮动流

复杂界面

1、从上至下布局
2、从外向内布局
3、水平方向可以先划分为一左一右，再对左边／右边进行进一步布局

内容参考