CSS 浮动float带来的影响及解决方法

元素设置 float: left; 属性后会变为块级元素，但它又和普通的块级元素有区别，普通的块级元素会独占一行，浮动后的块级元素会一个接一个的排列。因此它会影响后续的元素排版。下面的代码列举了两种清除浮动的办法（都用到了 clear: both; 属性，但写法上不同，适用场景也就不同了）：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>浮动（float）带来的问题</title>
    <style>
        /* 清除所有元素默认的边距，进行“强定义” */
        * {
            padding: 0;
            margin: 0;
        }
 
        /* 包裹住浮动元素 */
        .parent {
            overflow: hidden;
        }
 
        /* 浮动元素的样式 */
        .Box {
            float: left;    /* 一浮动变 块级元素！！！ */
            width: 100px;
            height: 30px;
            background-color: #66DAFA;
            text-align: center;
            line-height: 30px;
        }
 
        /* 高度为 0，对页面结构无影响，专用于清除浮动，可算作清除浮动的第二种方法 */
        .clear {
            clear: both;    /* CSS1 就已定义 */
        }
 
        /* 用 clear 清除浮动，否则 p 元素会和 .Box 排版到一行 */
        .p {
            clear: both;
            margin-top: 16px;    /* 调大 margin-top 的值会发现相对于 p 元素“定位” */
        }
    </style>
</head>
<body>
    <p>下面的 p 元素相对于本元素p margin-top 定位，但是也会受 .Box 盒子的影响。</p>
 
    <!-- 清除浮动的两种方法：一、父元素.parent hold住 二、单独盒子清除浮动的影响 -->
    <div class="parent">
        <div class="Box">.Box</div>
        <div class="Box">.Box</div>
        <div class="Box">.Box</div>
        <!--<div class="clear"></div>-->    <!-- 注释.parent 后解注本行 div -->
    </div>
 
    <!-- 受浮动（float）影响的元素 -->
    <p class="p">受浮动（float）影响的元素</p>
 
</body>
</html>

浮动（float）的问题当然不只这些！以上只是个人工作学习中的记录，以后会进一步的添加。

CSS 浮动float带来的影响及解决方法

相关推荐