4.CSS中float導致的高度坍塌問題及解決方法

-Advertisement-

高度坍塌：浮動元素佈局導致的問題高度坍塌的根源：浮動盒子脫離了常規流，因此常規流盒子進行高度計算時，不會考慮浮動盒子的高度。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" c ...

高度坍塌：浮動元素佈局導致的問題

高度坍塌的根源：浮動盒子脫離了常規流，因此常規流盒子進行高度計算時，不會考慮浮動盒子的高度。

<!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元素沒有將10個.sub的div元素包裹。

解決方法：

清除浮動，涉及CSS屬性：clear

clear：預設值為none，不清除浮動

clear：both，清除左右浮動，該元素必須出現在所有浮動盒子的下方

<!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

效果展示：

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

淺談Service中實現彈出對話框的坑

一、手機版本問題，大多數文章沒有涉及這個點，導致他們的代碼並無法正常使用 M版本以上需要使用的Type--> TYPE_APPLICATION_OVERLAY AlertDialog.Builder builder=new AlertDialog.Builder(getApplicationCont ...
Flutter 完美的驗證碼輸入框

老孟導讀：剛開始看到這個功能的時候一定覺得so easy，開始的時候我也是這麼覺得的，這還不簡單，然而真正寫的時候才發現並沒有想象的那麼簡單。先上圖，不上圖你們都不想看，我難啊，到Github： "https://github.com/781238222/flutter do" 上給個小星星可還行 ...
JavaScript：JS對象_Array

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> /* 1.創建 1.var arr = new Array(元素列表); 2.var arr = new Array(預設長度); 3.var a ...
JavaScript：Function:函數（方法）對象

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> /* Function:函數（方法）對象 1.創建 1.var fun = new Function（形式參數列表，方法體） 2.function ...
JavaScript實現簡單的圖片切換功能

` ` 最終的效果 ...
關於使用jquery的load方法時被載入頁面內部script失效問題的一次探索

事先聲明：本文由初學者撰寫，為一次探索的過程，可能有不嚴謹和準確的地方，望讀者多多諒解並積極指正！場景描述：在一次前端開發過程中，我使用了一個網頁模板，該模板包含一個主頁和四個子頁面，如下圖：具體的效果是，點擊主頁中的一個按鈕會在彈框內顯示子頁面的內容，如下圖：具體的實現是在主頁面中留出面板 ...
力軟敏捷框架 jfGrid 使用例子之一

百度了下關於力軟敏捷框架 jfGrid的教程，基本沒有，出來的全是jqGrid。好吧看來只能自己上手了今天來講講列設置屬性里數據格式化事件（formatter）的使用常規的使用方式如上圖所示。先來說說各個參數的意思： cellvalue 當前單元格的數據值，也就是你賦的值是什麼就是什麼。 ro ...
async和await是如何實現非同步編程?

目錄非同步編程樣例樣例解析淺談Promise如何實現非同步執行參考 1.非同步編程樣例樣例：執行結果： 2.樣例解析在樣例代碼中，非同步函數使用了和`await Generator Promise async await Generator Promise`實現。第一步：先將和`awa ...