Solution child elements floating height of the parent element zero

When an element contains only the floating element, it would appear highly folded, i.e. the upper and lower base elements overlap, and the same effect as a height of 0, in order to solve this, it is necessary to clear float. The following are specific problems and methods.

A, was added after the last child element of a floating div tag, and set style = "clear: both;", as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css_com/reset.css">
    <style>
        .parents{
            width: 100%;
            background-color: #4eff5e;
        }
        .son{
            float: left;
            margin:4px;
            width: 300px;
            height: 300px;
            background-color: #ff4236;
        }
    </style>
</head>
<body>
    <div class="parents">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <! - div processing sub-elements for the floating height of the parent element collapse Problems ->
        <div style="clear: both"></div>
    </div>
</body>
</html>

Second, using pseudo-element: After, ul to clear the float, as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css_com/reset.css">
    <style>
        .parents{
            width: 100%;
            background-color: #4eff5e;
        }
        .son{
            float: left;
            margin:4px;
            width: 300px;
            height: 300px;
            background-color: #ff4236;
        }
        .parents:after{
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="parents">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>
</html>

Third, the parent element to overflow attribute, the attribute value is set to hidden under normal circumstances, as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css_com/reset.css">
    <style>
        .parents{
            width: 100%;
            background-color: #4eff5e;
            overflow: auto;
        }
        .son{
            float: left;
            margin:4px;
            width: 300px;
            height: 300px;
            background-color: #ff4236;
        }
    </style>
</head>
<body>
    <div class="parents">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>
</html>

Solution child elements floating height of the parent element zero

Guess you like