国产高清视频一区二区,久久五月天综合网

4.CSS中float導(dǎo)致的高度坍塌問(wèn)題及解決方法

路人甲Java >《待分類》

2021.11.04

關(guān)注

高度坍塌：浮動(dòng)元素布局導(dǎo)致的問(wèn)題

高度坍塌的根源：浮動(dòng)盒子脫離了常規(guī)流，因此常規(guī)流盒子進(jìn)行高度計(jì)算時(shí)，不會(huì)考慮浮動(dòng)盒子的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            padding:30px;
            background-color:blue;
        }
        .sub{
            height:100px;
            width:100px;
            margin:10px;
            float:left;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
    </div>
</body>
</html>

index.html

效果展示：

.container的div元素沒(méi)有將10個(gè).sub的div元素包裹。

解決方法：

清除浮動(dòng)，涉及CSS屬性：clear

clear：默認(rèn)值為none，不清除浮動(dòng)

clear：both，清除左右浮動(dòng)，該元素必須出現(xiàn)在所有浮動(dòng)盒子的下方

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            padding: 30px;
            background-color: blue;
        }

        .sub {
            height: 100px;
            width: 100px;
            margin: 10px;
            float: left;
            background-color: red;
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="container clearfix">
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
    </div>
</body>

</html>

index.html

效果展示：

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

打開(kāi)APP，閱讀全文并永久保存查看更多類似文章

DAY48-前端入門-文檔流、浮動(dòng)布局、清浮動(dòng)、流式布局、定位布局

css清除浮動(dòng)大全，共8種方法

深入理解css布局之定位與浮動(dòng)

HTML CSS DIV實(shí)現(xiàn)整體布局

CSS——CSS浮動(dòng)與清除浮動(dòng)

解決子級(jí)用css float浮動(dòng) 而父級(jí)div沒(méi)高度不能自適應(yīng)高度

更多類似文章 >>

免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版