CSS浮动 - 技术栈

浮动

可以让块级元素待在一行，紧挨着，没有空格

float：left

浮动的元素会脱离正常的文档系统，像浮云一样飘起来
浮动元素后面的正常元素会自动补位
浮动元素会被父元素的宽高所束缚，所以不算完全的脱离文档流
当浮动元素的上一行是正常元素时，这个浮动元素只能待在当前行，不能跑到上一行
左浮动：元素向左跑，会从上一行最右边出来继续跑，直到遇到做浮动元素，紧贴着他
右浮动：元素向右跑，会从上一行最左边出来继续跑，直到遇到做浮动元素，紧贴着他

css 复制代码

        ul{
            width: 800px;
        }
        ul li{
            float: left;
            list-style-type: none;
            list-style-position: inside;
            padding: 20px;
        }
        img{
            width: 100px;
            height: 100px;
        }

css 复制代码

    <ul>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
    </ul>

清除浮动

规定元素哪一侧不能有浮动元素

清理元素左侧的浮动：

css 复制代码

   clear: left;

元素右侧无浮动元素，记得考虑页面的加载顺序：

css 复制代码

   clear: right;

元素左右侧都无浮动元素：

css 复制代码

   clear: both;

父元素高度塌陷

（子元素）li设置了浮动，不能给父元素撑起高度（父元素未设置高度），因而会造成塌陷，如下图所示：

css 复制代码

        ul{
            width: 800px;
            border: 1px solid red;
        }

清除浮动的方法

给父元素（块级元素）设置高度
在元素内容之后加一个块级元素，并设置左右两侧都无浮动元素
（不增加元素的前提下）使用伪元素的方法，并将其转化为表格元素

css 复制代码

        ul::after{
            content: "";
            display: table;
            clear: both;
        }

统一设置，可将其设置为一个类，这样只需要在父元素中引入类名即可：

css 复制代码

        .clearfix::after{
            content: "";
            display: table;
            clear: both;
        }

css 复制代码

    <ul class="clearfix">
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
    </ul>

注意：父元素设置有高度时，不用清除浮动