當前位置: 摩鑫平台 >> 知識庫 >> 正文
【CSS3詳解】五、浮動
發布時間:2024-04-28       編輯:網絡中心       瀏覽次數:

五、浮動

5-1🧎🏻‍♂️🙎🏻‍♀️、標準文檔流

塊級元素:獨占一行

h1~h6 p div 列表...

行內元素🌖:不獨占一行

span a img strong...

行內元素可以被包含在塊級元素中,反之則不行

5-2🙌🏽、display

display是一種實現行內元素的排列方式,但多數情況用float

<!--
block 塊元素
inline 行內元素
inline-block 是塊元素👨🏽‍🌾,但是可以內聯,在一行
none
--><style>
    div{
        width:100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
    span{
        width:100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }</style>

5-3🏄🏻、float

#father{
    border:1px #000 solid
}
.layer01{
    border:1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border:1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer03{
    border:1px #F00 dashed;
    display: inline-block;
    float: right;
}

5-4、父級邊框塌陷問題

clear

/*
clear:left; 左側不允許有浮動元素
clear:right; 右側不允許有浮動元素
clear:both; 兩側不允許有浮動元素
*/

解決方案🧎‍♀️‍➡️🙇:

  1. 增加父級元素的高度

#father{
    border:1px #000 solid;
    height: 500px;
}

  1. 增加一個空的div標簽,清除浮動

<div class="clear"></div>.clear{
    clear: both;
}

  1. overflow

在父級元素中增加一個 overflow:hidden
  1. 父類添加一個偽類♥️🕺🏿:after

#father:after{
    content: '';
    display: block;
    clear: both;}

小結:

  • 浮動元素後面增加空div🧑🏿‍💻,簡單🦕,但代碼中盡量避免空div

  • 設置父元素高度,簡單,但元素設置了固定的高度🧑🏼🌥,就會被限製

  • overflow,簡單,下拉的一些場景避免使用

  • 父類添加一個偽類:after(推薦使用),寫法稍微復雜🙅🏼‍♀️,但沒有副作用

5-5、對比

  • display😗:方向不可以控製

  • float:浮動起來會脫離標準文檔流🪫,要解決父級邊框塌陷問題

鏈接:https://blog.csdn.net/clover_page/article/details/130100672

作者❇️🏷:姜伯約

關閉本頁

摩鑫平台教育技術與網絡中心版權所有

©GDAFC Education Technology & Network Center, All Rights Reserved.

摩鑫平台专业提供🤽🏽:摩鑫平台🐄、摩鑫摩鑫娱乐等服务,提供最新官网平台、地址、注册、登陆、登录、入口、全站、网站、网页、网址、娱乐、手机版、app、下载、欧洲杯、欧冠、nba、世界杯、英超等,界面美观优质完美,安全稳定,服务一流𓀐,摩鑫平台欢迎您。 摩鑫平台官網xml地圖