前端筆記----清除浮動

時間 2020-05-17

標籤前端筆記清除浮動简体版

原文原文鏈接

一.浮動的特色：html

1.只有左浮動和有浮動，不存在中間浮動；
2.浮動碰到邊界就停下來，不管是父元素的邊界仍是子元素的邊界；
3.浮動默認按文檔流的形式佈局，一行位置不夠就自動換行；
4.浮動會自動將行內元素或塊元素轉化爲行內塊元素，同時沒有通常轉化爲行內塊元素的間距問題；
5.浮動元素後面沒有浮動的元素會佔據浮動元素的位置，浮動元素不佔位置，沒有浮動的元素內的文字會避開浮動的元素，造成文字饒圖的效果；
6.浮動元素之間沒有垂直margin的合併；佈局

二.CSS設置屬性中常常要用到浮動，可是父元素若是沒有設置尺寸(通常指的是高度不設置)，當父元素內全部的子元素設置浮動，spa

浮動的元素沒法撐開父元素，父元素須要清除浮動達到撐開的效果。htm

以下：blog

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>清除浮動</title>
    <style>
        .box {
            width: 500px;
            border: 1px solid red;
            margin: 10px;
            padding: 10px;
        }

        .box1 {
            width: 200px;
            height: 20px;
            float: left;  # 設置浮動
            background-color: red;
        }
        
</head>

<body>
    <hr class="hrx">
    <div class="box clearfix">
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
    </div>
</body>

</html>

　　效果：文檔

能夠看到，box並無包裹住全部的子元素，由於浮動的元素不佔盒子的位置。it

解決辦法通常有三種：table

1.使用通用的清浮動樣式類，通常命名clearfix，原理是利用僞類選擇器after和before在元素的頭和尾各增長一個空的塊元素，通常用div或table（表格）；而後class

使用clear屬性，設置both，即不容許左右浮動；記住：必定要設置在clearfix:after上。原理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>清除浮動</title>
    <style>
        .box {
            width: 500px;
            border: 1px solid red;
            margin: 10px;
            padding: 10px;
        }

        .box1 {
            width: 200px;
            height: 20px;
            float: left;
            background-color: red;
        }
        /* 清除浮動的樣式類 */
        .clearfix:after,
        .clearfix:before {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
    </style>
</head>

<body>
    <hr class="hrx">
    <div class="box clearfix">
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
    </div>
</body>

</html>

　結果：

2.在父級標籤上設置元素溢出，增長屬性overflow：hidden；其必須知道外部父級的實際邊界，可是這種方法有侷限性，當浮動的元素超出盒子邊界後會被剪裁掉。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>清除浮動</title>
    <style>
        .box {
            width: 500px;
            border: 1px solid red;
            margin: 10px;
            padding: 10px;
            overflow: hidden;  # 添加元素溢出隱藏
        }

        .box1 {
            width: 200px;
            height: 20px;
            float: left;
            background-color: red;
        }
       
    </style>
</head>

<body>
    <hr class="hrx">
    <div class="box clearfix">
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
    </div>
</body>

</html>

　　3.在最後一個子元素的後面加一個空的div，給它樣式屬性 clear:both（不推薦），這樣子元素就再也不是總體浮動，而是有一個不浮動。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>清除浮動</title>
    <style>
        .box {
            width: 500px;
            border: 1px solid red;
            margin: 10px;
            padding: 10px;
            
        }

        .box1 {
            width: 200px;
            height: 20px;
            float: left;
            background-color: red;
        }
# 設置空的div不容許左右浮動
        .boxx{
            clear:both;
        }
       
    </style>
</head>

<body>
    <hr class="hrx">
    <div class="box clearfix">
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="boxx"></div>
    </div>
</body>

</html>

相關標籤/搜索

每日一句

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