93_css笔记9_css的浮动流布局（float布局）

一，float属性：设置float浮动

float 属性定义元素在哪个方向浮动

left    元素向左浮动。
right    元素向右浮动。
none    默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit    规定应该从父元素继承 float 属性的值。

二，clear属性：清除float浮动

left    在左侧不允许浮动元素。
right    在右侧不允许浮动元素。
both    在左右两侧均不允许浮动元素。
none    默认值。允许浮动元素出现在两侧。
inherit    规定应该从父元素继承 clear 属性的值。

三，浮动流布局

1. 浮动流是一种"半脱离标准流"的排版方式
2. 浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
3. 浮动流中没有居中对齐, 也就是没有center这个取值
4. 在浮动流中是不可以使用margin: 0 auto;
5. 在浮动流中是不区分块级元素/行内元素/行内块级元素的
6. 无论是级元素/行内元素/行内块级元素都可以水平排版
7. 在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
8. 综上所述, 浮动流中的元素和标准流中的行内块级元素很像

四，浮动布局的脱标

1. 当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标；
2. 如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素；

五，浮动元素的排序规则

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

六，浮动元素的贴靠现象

1. 如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
2. 如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元素开始往前贴靠
3. 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边

七，浮动元素的字围现象

1. 浮动元素不会挡住没有浮动元素中的文字,
2. 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

八，浮动元素的高度问题

1. 在标准流中内容的高度可以撑起父元素的高度
2. 在浮动流中浮动的元素是不可以撑起父元素的高度的

九，清除浮动元素的方式

1. 方法1：给前面一个父元素设置高度
   1. 在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少
2. 方法2：给后面的盒子添加clear属性
   1. 当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效
   2. clear属性取值:
      1. none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
      2. left: 不要找前面的左浮动元素
      3. right: 不要找前面的右浮动元素
      4. both: 不要找前面的左浮动元素和右浮动元素
3. 方法3：隔墙法
   1. 外墙法
      1. 在两个盒子中间添加一个额外的块级元素
      2. 给这个额外添加的块级元素设置clear: both;属性
      3. 外墙法它可以让第二个盒子使用margin-top属性
      4. 外墙法不可以让第一个盒子使用margin-bottom属性
   2. 内墙法
      1. 在第一个盒子中所有子元素最后添加一个额外的块级元素
      2. 给这个额外添加的块级元素设置clear: both;属性
      3. 内墙法它可以让第二个盒子使用margin-top属性
      4. 内墙法它可以让第一个盒子使用margin-bottom属性
   3. 外墙法和内墙法区别?
   4. 外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度
   5. 在企业开发中不常用隔墙法来清除浮动
4. 方法4：利用伪元素选择器清除浮动
   1. 伪元素选择器?
   2. 给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素
   3. 格式:

      1. 2.格式:
         标签名称::before{
             属性名称:值;
         }
         给指定标签的内容前面添加一个子元素
         
         标签名称::after{
             属性名称:值;
         }
         给指定标签的内容后面添加一个子元素

          

   4. 利用伪元素选择器清除浮动，本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样
   5. IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性
5. 方法5：利用overflow: hidden;
   1. 可以将超出标签范围的内容裁剪掉
   2. 清除浮动
   3. 可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来

十，浮动流的使用场合

• 垂直方向使用标准流, 水平方向使用浮动流