CSS如何清除浮動流的多種方案

時間 2020-05-17

標籤 css 如何清除浮動多種方案欄目 CSS 简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <style>
 8     .wrapper{
 9         border: 20px solid black;
10     }
11     .content{
12         float: left;
13         width: 100px;
14         height: 100px;
15         background-color: #bbb;
16         color: black;
17         font-size: 50px;
18         margin-left: 20px;
19         margin-bottom: 20px;
20         line-height: 100px;
21         text-align: center;
22     }
23 </style>
24 <body>
25     <div class="wrapper">
26         <div class="content">1</div>
27         <div class="content">2</div>
28         <div class="content">3</div>
29         <div class="content">4</div>
30         <div class="content">5</div>
31         <div class="content">6</div>
32         <div class="content">7</div>
33         <div class="content">8</div>
34     </div>
35 </body>
36 </html>

View Code

顯示效果以下圖html

因爲方塊元素產生了浮動流，因此外面的wrapper沒法包裹裏面的元素，如何作到清除浮動流，讓wrapper包裹裏面的元素呢，造成以下圖形？下面介紹幾種方法。app

方法1：在content的最後一個元素後面添加一個塊元素（p div ul li ol form address），塊元素上添加clear。ide

不足：雖然可以知足要求，可是因爲引入了新的元素（標籤）破壞了總體的結構，因此不推薦。spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .wrapper{
        border: 20px solid black;
    }
    .content{
        float: left;
        width: 100px;
        height: 100px;
        background-color: #bbb;
        color: black;
        font-size: 50px;
        margin-left: 20px;
        margin-bottom: 20px;
        line-height: 100px;
        text-align: center;
    }
    p{
        clear: both;
    }
</style>
<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
        <div class="content">5</div>
        <div class="content">6</div>
        <div class="content">7</div>
        <div class="content">8</div>
        <p></p>
    </div>
</body>
</html>

View Code

方法2：利用僞元素清除浮動流3d

思考：爲何不能利用content上的僞元素清除浮動流。code

僞元素after是內容的最後部分，若是利用content僞元素after只能清除content內容的浮動流，沒法清除content後的浮動流，因此無法達到目的。orm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .wrapper{
        border: 20px solid black;
    }
    .content{
        float: left;
        width: 100px;
        height: 100px;
        background-color: #bbb;
        color: black;
        font-size: 50px;
        margin-left: 20px;
        margin-bottom: 20px;
        line-height: 100px;
        text-align: center;
    }
    .wrapper::after{
        content: "";
        clear: both;
        display: block;
    }
</style>
<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
        <div class="content">5</div>
        <div class="content">6</div>
        <div class="content">7</div>
        <div class="content">8</div>
    </div>
</body>
</html>

View Code

方法3：讓wrapper觸發BFC，觸發BFC的方法有以下三種。htm

float：left/rightblog

position:absolute;it

display:inline-block;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .wrapper{
        float: left;
        /*position: absolute;*/
        /*display: inline-block;*/
        border: 20px solid black;
    }
    .content{
        float: left;
        width: 100px;
        height: 100px;
        background-color: #bbb;
        color: black;
        font-size: 50px;
        margin-left: 20px;
        margin-bottom: 20px;
        line-height: 100px;
        text-align: center;
    }
</style>
<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
        <div class="content">5</div>
        <div class="content">6</div>
        <div class="content">7</div>
        <div class="content">8</div>
    </div>
</body>
</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。