css的浮动和定位

1.浮动
（1）浮动的分类
选择器{float:属性值;}

属性值

描述

left

元素向左浮动

right

元素向右浮动

none

元素不浮动（默认值）

（2）浮动的特征
        浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

        浮动首先创建包含块的概念。就是说，浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。

总结：

           1、浮动后的元素会漂浮在其他元素上边

            2、浮动后的元素是不占原来的位置

            3、浮动后的元素不能超出父元素的范围

            4、浮动后的元素在同一水平线上显示

            5、浮动后的元素会自动的转化为具有行内块元素的性质

            6、浮动后的元素不能超出父元素的内边距和边框

总之：与标准文档流对应的是浮动流，浮动元素不占有文档空间，就像浮在页面之上一样，浮动元素不区分块元素还是行内元素。在父元素内，子元素放得下就放，放不下就下一行放，浮动元素必须贴着上一个浮动元素排放，如图所示：

（3）设置浮动：float: left/right

代码：

<style>
        .father {
            /* 父元素 */
            height: 500px;
            width: 500px;
            background-color: aqua;
        }
        .son {
            height: 200px;
            width: 200px;
            background-color: red;
            border: 1px black solid;
            /* 子元素添加浮动 */
            float: left;
        }

       
        
    </style>

<div class="father">
        <div class="son">子</div>
        <div class="son">子</div>
        <div class="son">子</div>
    </div>

运行效果：

2、定位

2.1：什么是定位：

定位是一种更为精确地控制元素位置的技术，通过设置元素的position属性为relative，absolute，fixed，或stickly，可以改变元素在文档流中的定位方式。

        

2.2：定位的四种模式以及定位的属性

静态定位

相对定位

固定定位

绝对定位

这里主要介绍最常用的相对定位和绝对定位。

2.3：相对定位position: relative;

相对定位是相对于原来应该在的位置而言，

<style>
        .box1 {

            width: 100%;
            height: 200px;
            background-color: aqua;
        }
        .box2 {
            /* 设置定位 */
            position: relative;
            top: 200px;
            left: 200px;
            height: 200px;
            width: 200px;
            background-color: red;
            
        }
       

       
        
    </style>

<div class="box1"></div>
<div class="box2"></div>

  

2.4：绝对定位position: absloute;

绝对定位通常要配合相对定位使用，因为绝对定位会根据最近一个有定位的父盒子的位置进行定位。也就是“子绝父相”。

添加了绝对定位的元素会脱标（脱离标准流），不占有位置，就像浮在一个固定的位置一样

添加了相对定位的元素不会脱标，继续占有原来的位置，只是可能显示在别的位置而已，显示位置不影响该位置原来的元素

<style>
        .box1 {

            width: 100%;
            height: 200px;
            background-color: aqua;
        }
        .box2 {
            /* 设置定位 */
            position: relative;
            top: 200px;
            left: 200px;
            height: 200px;
            width: 200px;
            background-color: red;
            
        }
        
    </style>
<div class="box1"></div>
    <div class="box2"></div>
    <div class="box1"></div>

效果图：

3.结论

浮动和定位是两种不同的技术，它们可以单独使用或结合在一起，具体取决于你想要实现的布局效果和交互行为。