浮动元素详解

news2024/12/22 13:33:17

浮动元素

代码实现：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>浮动元素</title>
    <style>
        #container1 {
            width: 400px;
            height: 50px;
            background-color: lightgrey;
            border: 1px solid;
        }

        #container1 div {
            width: 100px;
            height: 30px;
            border: 1px solid;
            background-color: #fff;
        }

        .lft {
            float: left;
        }

        .rgh {
            float: right;
        }

        #container2 {
            width: 400px;
            height: 100px;
            background-color: lightgrey;
            border: 1px solid;
        }

        #container2 .lft {
            width: 300px;
            height: 20px;
            border: 1px solid;
            background-color: #fff;
        }

        #container2 .rgh {
            width: 150px;
            height: 50px;
            border: 1px solid;
            background-color: #fff;
        }

        #container3 {
            width: 400px;
            height: 150px;
            background-color: lightgrey;
            border: 1px solid;
        }

        #container3 div {
            border: 1px solid;
            background-color: #fff;
        }

        #container3 div:nth-child(-n+2) {
            width: 100px;
            height: 30px;
        }

        .clr {
            clear: both;
        }

        #container3 div:nth-child(4) {
            width: 190px;
            height: 40px;
        }

        #container3 div:nth-child(5) {
            width: 120px;
            height: 20px;
        }

        #container3 div:nth-child(n+7) {
            width: 120px;
            height: 20px;
        }
    </style>
</head>

<body>
    <h2>只要宽度之和小于父元素宽度，块级元素就在同一行</h2>
    <div id="container1">
        <div class="lft">float left;</div>
        <div class="lft">float left;</div>
        <div class="rgh">float right;</div>
    </div>
    <h2>两个浮动元素宽度之和大于父元素宽度，其中一个换行</h2>
    <div id="container2">
        <div class="lft">float:left</div>
        <div class="rgh">float:right</div>
    </div>
    <h2>使用clear:both清除浮动并创建新的浮动行</h2>
    <div id="container3">
        <div class="lft">float left;</div>
        <div class="lft">float left;</div>
        <div class="clr"></div>
        <div class="lft">float left;</div>
        <div class="rgh">float:right</div>
        <div class="clr"></div>
        <div class="rgh">float:right</div>
        <div class="rgh">float:right</div>
        <div class="rgh">float:right</div>
    </div>
</body>

</html>