CSS入门篇基础总结（三）

浮动的简介与三个特点

浮动的简介
块元素在文档流 会独占一行，自上而下排列

   如果设置元素浮动，元素脱离文档流后，就不会具有在文档流中的特点

      float: ; 设置元素的浮动

        可选值：

          none  默认值，元素正常显示，不浮动

          left  元素向左浮动

          right  元素向右浮动

          float可以使块元素水平布局

设置float浮动特点（第一类特点）
 1、设置元素浮动之后，元素会脱离文档流，元素原来在文档流中的位置，就不会存在

          下面的元素就会上移，挤上去

        2、设置元素浮动之后，元素会尽量的向左或者向右，向上进行移动，

        而且默认情况下，不会脱离父元素的范围

        3、设置浮动的元素，不会超过它前一个兄弟，最多一遍齐

        4、如果浮动元素的前一个兄弟，没有浮动，则浮动的元素不会超过他前面没有浮动的元素

        总结：浮动主要是用于元素的水平布局

浮动的第二类特点

      当浮动元素遇到了文字，浮动的元素不会覆盖文字，而是文字会环绕在浮动元素的周围

      从而实现文字环绕图片的效果

      这也是浮动最早的功能，只是后面用于水平布局

浮动的第三类特点
      元素在文档流当中

      块元素  ： 独占一行

      行内元素 ： 不会独占一行，不能自定义设置宽高

      行内块元素 ：兼具块元素，行内元素的特点

      元素脱离文档流了，就不再区分块，行内，行内块，也就不具有以上的特点

        元素也不会独占一行了，也可以设置宽高了等等

当元素设置浮动以后，会完全脱离文档流，元素的一些特点也会发生改变

      脱离文档流的特点

      块元素：

        1:块元素不再独占页面的一行

        2:块元素的宽高被内容撑开

      行内元素：

        1:浮动过后的行内元素更像行内块元素,因问一行可以显示多个，并且默认宽度为内容的宽度

     总结：当元素设置浮动以后,脱离文档流，就不需要再区分块和行内
 

高度塌陷机解决高度塌陷的三个方案

一般情况下，父元素的高度是不设置的，让它被内容撑开

    高度塌陷：
      父元素的高度一般是被子元素或者叫内容撑开的，若设置子元素浮动，则子元素就会脱离文档流，也就撑不开父元素的高度了，从而导致父元素的高度丢失，页面布局混乱

    解决高度塌陷的方案一：
      设置父元素的高度

        这种方式不推荐使用

高度塌陷解决方案二：
      页面元素中的隐含属性：Block Formatting Context 即块格式化上下文，简称BFC

        当开启元素的BFC以后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素

        BFC 理解为一个封闭的大箱子，箱子内部的元素不会影响到外部。

      开启BFC后，元素将会具有如下的特性：

      1.父元素的垂直外边距不会和子元素重叠(解决父子外边距重叠的问题)

      2.开启BFC的元素不会被浮动元素所覆盖

      3.开启BFC的元素可以包含浮动的子元素（可解决高度塌陷）

     

      如何开启元素的BFC

      1.设置元素浮动（不推荐）

        - 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失

          而且使用这种方式也会导致下边的元素上移，不能解决问题

      2.设置元素为inline-block（不推荐）

        - 可以解决高度丢失的问题，但是会导致宽度丢失，而且会有一个三像素的空白，不推荐使用这种方式

      3.将元素的overflow设置为一个非visible的值

         副作用比较小，推荐使用

      4.设置元素绝对定位

         元素也会脱离文档流，虽然可以撑开父元素，但是会导致父元素的宽度丢失

          而且使用这种方式也会导致下边的元素上移，不能解决问题

               

      推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。

/*通过after伪类，选中box1的后边*/

 解决高度塌陷方案三：
  可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，

  这样做和添加一个div的原理一样，可以达到一个相同的效果，

  而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用

      .box1:after {
        /*添加一个内容*/

        content: "";

        /*转换为一个块元素*/

        display: block;

        /*清除两侧的浮动*/

        clear: both;

      }
 

相对定位与绝对定位

相对定位：
  定位从两个方面来掌握，

            一个方面是如何开启，

            另一个方面，开启定位后，它的特点是什么

 定位：是一种布局的手段，而且是一种高级的布局手段，

     你可以将任何元素，摆放在页面的任意位置

     可以用position来设置定位

       可选值：

          static  默认值，不开启定位

          以下四种定位方式，都属于开启了定位

          relative  相对定位

          absolute  绝对定位

          fix       固定定位

          sticky    粘滞定位  

偏移量  

        left   相对于定位位置，左侧的偏移量

        right  相对于定位位置，右侧的偏移量

        top    相对于定位位置，顶部的偏移量

        bottom   相对于定位位置，底部的偏移量

     position：relative  开启了相对定位

      1、如果不设置偏移量，元素的位置是不发生任何变化

      2、设置偏移量，偏移量的相对位置是相对于元素原来在文档流中的位置（left：0；top：0）

      3、设置相对定位后，元素的性质是不发生变化

      4、设置相对定位后，元素的层级会提高

      5、设置相对定位后，元素是不会脱离文档流

绝对定位：
开启绝对定位

         position: absolute;

      绝对定位后的特点

        1、设置绝对定位后，元素会脱离文档流

        2、设置绝对定位后，元素的性质就会发生变化，就不会再区分块还是行内了

        3、设置绝对定位后，如果不设置偏移量，元素的位置也不会发生变化

        4、绝对定位，它的原点是相对于其包含块来定位的

        5、设置绝对定位后，元素的层级也会提高

      注意：一般情况下，为了更好的控制子元素的位置，

           我们会在开启子元素的绝对定位后，会同步开启父元素的相对定位

           这叫"子绝父相"

     -->

    <!-- 包含块

      1、默认情况（没有定位的情况下），包含块就是元素的祖先元素

      2、如果是定位的情况下，包含块就是元素的开启了定位的，离它最近的祖先元素

         如果祖先元素都没有开启定位，则包含块就是根标签（html）

当position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位：

1.开启绝对定位，会使元素脱离文档流

2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

3.绝对定位是相对于离他最近的包含块定位的

  （一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）

4.绝对定位会使元素提升一个层级

5.绝对定位会改变元素的性质，开启BFC属性

  内联元素变成行内块元素，

  块元素的宽度和高度默认都被内容撑开

 包含块：containing block

-正常情况下：

  离当前元素最近的祖先块元素

-定位情况下：

  离他最近的开启了定位的祖先元素

    如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

    html （根元素，初始包含块）