浮动

浮动

• 浮动：

  • 属性名: float
  • 属性值: left | right | none
  • 场景: 看到竖排的变成 横排的基本都是靠 浮动实现的
  • 常规: 浮动一般用于 块级元素
  • 注意点: 浮动不会保留原来的位置, 下面有文字会产生环绕效果

• 取消浮动: 只是保留原来的位置, 浮动后的效果依旧存在

  • 属性名: clear

  • 属性值: left | right | both

  • 清除浮动方法:

    • 清除浮动方法1: (原理, 最不推荐的写法)

      ​ (同级关系)在浮动元素的最后面, 添加空块级标签, 并赋予clear属性

    • 清除浮动方法2: (BFC区域)

      • 给浮动元素的父级, 添加overflow:hidden 样式, 从而清除子级的浮动
      • BFC区域: 一旦形成BFC区域, 区域的所有元素不会影响区域外的元素
      • 形成BFC区域的方式有多种:
        • overflow:hidden
        • float:none
        • …
      • 绝大多数的浏览器都支持, 也有部分浏览器不支持

    • 清除浮动方法3: (推荐写法, 代码最多的写法, 伪对象选择器)

      • 给浮动元素的父级, 添加伪对象, 从而清除子级的浮动 (利用原理)

        父级元素::after{
                            content:' ';
                            display:block;      将当前元素 转成 块级元素
                            clear:both;
                        }
        

.clearfix::after, .clearfix::before{
    content:'';
    display:block;
}
.clearfix::after{
    clear:both;
}

<style>
        ul, body{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
            float: left;
            /* float: right; */
            margin-left: 15px;
        }
        .box{
            width: 300px;
            height: 300px;
            background: pink;
        }
        ul::after{
            content: ' ';
            display: block;
            clear: both;
        }
</style>

<!-- 原理清除浮动 -->
    <!-- 
    <ul>
        <li>小米手机</li>
        <li>RedMi红米</li>
        <li>电视</li>
        <li>笔记本</li>
        <div style="clear:left"></div>
    </ul> -->
    <!-- BFC区域 -->
    <!--
    <ul style="overflow:hidden;">
        <li>小米手机</li>
        <li>RedMi红米</li>
        <li>电视</li>
        <li>笔记本</li>
    </ul>
    -->
    <!-- 伪对象清除浮动 -->
    <ul>
        <li>小米手机</li>
        <li>RedMi红米</li>
        <li>电视</li>
        <li>笔记本</li>
    </ul>
    <div class="box"></div>