CSS-盒子浮动

一、浮动导读

1.1 什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框边缘

语法：
选择器 { float ： 属性值 ；}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

1.2 浮动特性

①设置了浮动（float）的元素最重要特性：

1. 脱离标准普通流的控制（浮）移动到指定位置（动）。俗称（脱标）
2. 浮动的盒子不再保留原先的位置

②如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

③浮动元素会具有行内块元素特性
任何元素都可以浮动。不管原来是什么模式的元素，添加浮动之后具有行内块元素的特性。

1. 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但添加浮动之后，它的大小根据内容决定
2. 浮动的盒子中间是没有缝隙的，是紧挨着一起的
3. 行内元素同理

1.3 网页布局准则

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
网页布局第二准则：先设置盒子大小，再设置盒子位置

由2可以推断出，一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

案例1：

<style>
        * {
     
            margin: 0;
            padding: 0;
        }

        li {
     
            list-style: none;
        }

        .box {
     
            width: 1226px;
            height: 285px;
            background-color: pink;
            margin: 0 auto;
        }

        .box li {
     
            float: left;
            width: 296px