浮动详解 - PLDaily Blog

本文记录对清除浮动的详解

浮动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    #main {
        background-color: green;
    }
    #div1 {
        background: yellow;
        width: 200px;
        height: 200px;
        float: left;
    }
    #div2 {
        background-color: blue;
        width: 200px;
        height: 200px;
        float: left;
    }
    </style>
</head>
<body>
    <div id="main">
        <div id="div1">
            
        </div>
        <div id="div2">
            
        </div>
    </div>
</body>
</html>

此时父元素#main的高度宽度由子元素#div1与#div2决定，由于子元素设置浮动脱离文档流，导致父元素高度为0，使其父元素#main背景颜色无效果。

清除浮动方式一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    #main {
        background-color: green;
        overflow: hidden;
    }
    #div1 {
        background: yellow;
        width: 200px;
        height: 200px;
        float: left;
    }
    #div2 {
        background-color: blue;
        width: 200px;
        height: 200px;
        float: left;
    }
    </style>
</head>
<body>
    <div id="main">
        <div id="div1">
            
        </div>
        <div id="div2">
            
        </div>
    </div>
</body>
</html>

父元素设置overflow: hidden;属性原理：因为overflow.hidden会触发BFC(块级排版上下文)。都会为他们的内容创建新的块级格式化上下文

清除浮动方式二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    #main {
        background-color: green;
    }
    #div1 {
        background: yellow;
        width: 200px;
        height: 200px;
        float: left;
    }
    #div2 {
        background-color: blue;
        width: 200px;
        height: 200px;
        float: left;
    }
    .clear{
        clear:both;
        height: 0;
        line-height: 0;
        font-size: 0
    }
    </style>
</head>
<body>
    <div id="main">
        <div id="div1">
            
        </div>
        <div id="div2">
            
        </div>
        <div class="clear">
            
        </div>
    </div>
</body>
</html>

添加一个子元素div，设置clear: both;属性缺点：每次清除浮动都需要添加一个子元素div

清楚浮动方式三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    #main {
        background-color: green;
    }
    #div1 {
        background: yellow;
        width: 200px;
        height: 200px;
        float: left;
    }
    #div2 {
        background-color: blue;
        width: 200px;
        height: 200px;
        float: left;
    }
    .clear:after { 
        content:"."; 
        display:block; 
        height:0; 
        visibility:hidden; 
        clear:both; 
    } 
    </style>
</head>
<body>
    <div id="main" class="clear">
        <div id="div1">
            
        </div>
        <div id="div2">
            
        </div>
    </div>
</body>
</html>

使用after伪类，则不需要每次清除浮动都新建一个子元素