css 浮動佈局，清除浮動

時間 2019-11-20

標籤 css 浮動佈局清除欄目 CSS 简体版

原文原文鏈接

浮動的特性：

（1）浮動元素有左浮動（float:left）和右浮動（float:right）兩種css

（2）浮動的元素會向左或向右浮動，碰到父元素邊界、其餘元素才停下來html

（3）相鄰浮動的塊元素能夠並在一塊兒，超出父級寬度就換行spa

（4）浮動讓行內元素或塊元素自動轉化爲行內塊元素（此時不會有行內塊元素間隙問題）code

（5）浮動元素後面沒有浮動的元素會佔據浮動元素的位置，沒有浮動的元素內的文字會避開浮動的元素，開成文字繞圖的效果orm

（6）父元素若是沒有設置尺寸（通常是高度不設置），父元素內總體浮動的元素沒法撐開父元素，父元素須要清除浮動 overflow:hidden;htm

（7）浮動元素之間沒有垂直margin的合併blog

代碼：開發

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動</title>
    <style type="text/css">
        .con{
            width:400px;
            height:80px;
            border:1px solid gold;
            margin:50px auto 0;
        }

        .con div{
            width:60px;
            height:60px;
            /*display:inline-block;*/
            margin:10px;

        }

        .con .box01{
            background-color:green;
            float:left;
        }

        .con .box02{
            background-color:pink;
            float:right;
        }

    </style>
</head>
<body>
    <div class="con">
        <div class="box01"></div>
        <div class="box02"></div>
    </div>
</body>
</html>

頁面效果：it

代碼：io

<!DOCTYPE html>

<head>

.news_title{

width:400px;

height:40px;

border-bottom:1px solid #ff8200;

margin:50px auto 0;

}

.news_title h3{

float:left;

width:80px;

height:40px;

background-color:#ff8200;

margin:0;

font-size:16px;

color:#fff;

text-align:center;

line-height:40px;

font-weight:normal;

}

.news_title a{

float:right;

/*background-color:cyan;*/

/*width:80px;*/

/*height:40px;*/

text-align:right;

text-decoration:none;

/*line-height:40px;*/

font:normal 14px/40px "Microsoft YaHei";

color:#666;

}

.news_title a:hover{

color:#ff8200;

}

</style>

</head>

<body>

</div>

</body>

</html>

頁面效果：

清除浮動：

（1）父級上增長屬性overflow:hidden

（2）在最後一個子元素的後面加一個空的div，給它樣式屬性clear.both（不推薦）

（3）使用成熟的清浮動樣式類，clearfix

.clearfix:after,.clearfix:before{ content:」」;display:table;}

.clearfix:after{ clear:both; }

.clearfix{ zoom:1; }

清除浮動的使用方法：

.con2{ ... overflow:hidden }

或者

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮動</title>
    <style type="text/css">
        .list{
            width:210px;
            /* 不給高度出現浮動問題 */
            /*height:400px;*/
            list-style: none;
            border:1px solid #000;
            margin:50px auto 0;
            padding:0;
            /* 第一種清除浮動的方法 */
            /*overflow:hidden; !* 清除浮動 *!*/
        }

        .list li{
            width:50px;
            height:50px;
            background-color:gold;
            margin:10px;
            float:left;
        }
        /* 第三種清除浮動的方法 */
        .clearfix:after{
            content:"";
            display:table;
            clear:both;
        }

        /* 解決margin-top塌陷和清除浮動的方法合併爲 */
        .clearfix:before,.clearfix:after{
            content:"";
            display:table;
        }
        .clearfix:after{
            clear:both;
        }
        /* 兼容IE清除浮動的方法 */
        .clearfix{
            zoom:1;
        }

    </style>
</head>
<body>

    <ul class="list clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <!-- 第二種清除浮動的方法，實際開發中不用  -->
        <!--<div style="clear:both"></div>-->
    </ul>
</body>
</html>

頁面效果：

1. css 浮動清除浮動
2. CSS清除浮動_清除float浮動
3. CSS之浮動佈局（float，浮動原理，清除/閉合浮動方法） css之浮動佈局
4. CSS清除浮動
5. css清除浮動
6. CSS-清除浮動
7. CSS 清除浮動
8. css 清除浮動
更多相關文章...
• ionic 浮動框 - ionic 教程
• W3C CSS 活動 - W3C 教程
• 算法總結-滑動窗口
• Docker 清理命令

相關標籤/搜索

每日一句

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