css定位机制原理详解(标准流&定位&浮动)

ゝ一世哀愁。 2021-12-05 04:34 562阅读 1赞

一、css定位机制  
分为普通流（标准流），浮动、绝对定位  
1、**标准流**:默认状态是元素从左往右。从上往下的排列，也就是说标准流中元素的位置是由它在HTML中的位置决定的  
**块级元素特性：**  
块级元素大多为结构性标记

*  独占一行
 *  可以设置宽高
 *  如果不设置宽高，宽度默认为容器的100%
 *  块级元素有div,p,h1~h6,ul,ol,li,dl(定义列表),dt,dd，table,form,hr(水平分割线),marquee(滚动文本)

**行内元素特性：**  
行内元素大都为描述性标记

*  与其它元素同行显示
 *  不可以设置宽高
 *  宽高就是文字或者图片的宽高
 *  行内元素有：span,a,b,i(斜体),u下划线,b(加粗),em,img.input,textarea,select,br(换行)，strong(加粗)

2、由于普通流是不灵活的，也就有了 **定位**，定位分为相对定位和绝对定位  
**（1）相对定位**：指将元素从标准流中分离出来，相对于它原来的位置进行偏移。但它还依然在标准流中占据着它原来的位置。也就意味着相对于其它元素而言它还在它原来的位置上，而且它偏移后会覆盖在其它元素上

实例如下：

*  绿方块未使用相对定位的时候

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]

*  绿方块使用相对定位并向右移动自生宽度之后

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]  
可以看到绿方块将其它元素覆盖，而其在标准流中原来的位置依然留着，而且相对定位的元素的移动是相对于其自身在标准流中原来的位置进行移动的

**（2）绝对定位**：也是将元素从标准流中分离出来，区别是绝对定位的元素不再在标准流中占据着原来的位置，因此相对于其它的元素来看它是不存在的，它移动之后它在标准流中原来的位置将被其它元素取代。  
由于定位出现的元素覆盖问题再就有了z-index属性

实列：

*  未使用绝对定位的时候

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 2]

*  给父元素设置相对定位，给绿块设置绝对定位并相对于其父元素向右移动自身宽度之后

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 3]  
可以发现使用绝对定位的元素并将其移动或者不移动它在标准流中原来的位置都会被其它元素占据，而使用绝对定位的元素的移动是相对于浏览器或者其父容器进行移动的

**3、浮动**

**（1）浮动元素特性**

*  会使元素向左或者向右移动，只能左右，不能上下
 *  浮动元素碰到一个包含框或者另一个浮动框浮动就会停止
 *  浮动之后的元素将围绕着它，之前的元素不受影响
 *  浮动的元素会脱离文档流，但不会脱离文字流，即某元素浮动之后，其它没有浮动的文档元素会占据它在标准流中的位置，但是文字不会去占据它的位置

**（2）实例：**

*  元素都未浮动的时候

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 4]

*  只有方块1向左浮动的时候  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 5]  
    可以发现方块2跑到了方块1的下面，这是因为方块1浮动之后脱离了文档流，没有浮动的元素就会去占据它的位置，但是仔细看可以发现方块2里面的字体还在原来的位置，这是因为浮动的方块1没有脱离文字流，所以它在文字中还是占着位置的，文字也就无法去填充它的位置。
 *  方块1和方块2都向左浮动的时候  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 6]  
    可以发现方块2和方块1跑到了同一行，但是没有被覆盖，这是因为浮动元素遇到另一个浮动元素浮动就会停止。同理方块3依次往上移动跑到了方块1的下面，是因为前面两个方块都移动并脱离了文档流，但是没有脱离文字流，所以方块3的文字依然在原来的位置没有跑去占据位置。
 *  三个方块都向左浮动的时候  
    ![在这里插入图片描述][2019071920060521.png]  
    可以发现三个块都浮动到了一行，原因和上面所说相同。同时父元素的高度没有被撑开。原因和上面一样，因为三个块都浮动之后自然都脱离了文档流，不再占据位置，自然没有东西去把父元素撑开了。

**（3）浮动后产生的问题**  
由上面实例可以得出浮动之后可以产生以下问题：

*  多个元素浮动之后父元素可能撑不开，父元素高度可能变为0
 *  浮动元素之后的元素会紧跟着浮动起来
 *  浮动元素之前的同级元素若没有浮动，则会影响页面结构

**(4)清除浮动的方法**  
clear:left|right|both

*  方法一：给浮动元素的最后一个没有浮动的元素添加clear

.child1{
              background-color:green;
              float:left;
            }
            .child2{
                background-color:yellow;
                float:left;
            }
            .child3{
                background-color:deeppink;
                float:left;
            }
             .clear{
                clear:both;
            }

![在这里插入图片描述][20190722113326267.png]  
结果可以发现父元素被撑开了

*  方法二：给浮动元素的父元素添加overflow:hidden或者overflow:auto样式  
    因为可以通过overflow属性触发一个块级格式化上下文，可以理解为给父元素形成了一个新的盒子，这个盒子可以把浮动元素包裹起来。

.father{
                width:400px;
                margin:auto;
                border:2px solid black;
                overflow:hidden;
               /* overflow:auto;*/
                
            }
             .child1{
              background-color:green;
              float:left;
            }
            .child2{
                background-color:yellow;
                float:left;
            }
            .child3{
                background-color:deeppink;
                float:left;
            }

*  方法三：通过css3的:after伪元素，给其添加5个属性

.father{
                width:400px;
                margin:auto;
                border:2px solid black;
            }
            //添加5个属性如下
            .clearFix:after{
                content:'';
                height:0;
                display:block;
                visibility:hidden;
                clear:both;
            }
             .child1{
              background-color:green;
              float:left;
            }
            .child2{
                background-color:yellow;
                float:left;
            }
            .child3{
                background-color:deeppink;
                float:left;
            }

*  方法四：给父元素也添加浮动

.father{
                width:400px;
                margin:auto;
                border:2px solid black;
                float:left;
            }

这样确实可以清除子元素浮动产生的问题，但是父元素浮动之后也会脱离文档流，会产生新的浮动问题，所以不建议使用

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]: /images/20211205/32f03922349a43a7b58f45ed93e55a0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]: /images/20211205/4ad3000a23b84aa9bdd7da833c97f138.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 2]: /images/20211205/7f8f11afdca140f7a5822ac6a8cc682c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 3]: /images/20211205/e09df5070a854f7393cf8607dd9095be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 4]: /images/20211205/502553d8fec84c89bca4408c9471c1e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 5]: /images/20211205/a77c82033c324d508605988cc77584cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 6]: /images/20211205/1e1e2873ac434b1da59bf64ef09873a5.png
[2019071920060521.png]: /images/20211205/490812786f5f40c2bee271485731d877.png
[20190722113326267.png]: /images/20211205/c80a668af7074596ab87be0fec8ab7e0.png