float & overflow & clear

1. float元素脫離了正常的文檔流(盒模型)

不參與父元素高度計算
(但同級display:inline-block能夠感知其存在)

2. float元素未脫離文本流

同級 display:inline和display:block中的文本會圍繞在其周圍

3. overflow:hidden|auto|scroll 能解決float造成的父元素高度塌陷

正常情況下float元素不參與父元素高度的計算，但當父元素overflow屬性設置了hidden|auto|scroll后，在父元素沒有設置固定高度的情況下，float元素的高度能夠撐起父元素的高度

4. clear:left|right|both 能夠清除當前元素前的，對應浮動方向的float兄弟元素的浮動
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • day01-_起源和結構 結構：Xhtml xml 表現(xiàn)：CSS 行為：DOM ECMAScript 以上都屬于W...
    Sakura_明妃閱讀 1,326評論 0贊 1
  • https://www.zhangxinxu.com/wordpress/2010/01/css-float%E6...
    楓葉落盡閱讀 129評論 0贊 0
  • 一、在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例 在CSS當中，相...
    dengpan閱讀 690評論 0贊 0
  • display: none; 與 visibility: hidden; 的區(qū)別 聯(lián)系：它們都能讓元素不可見 區(qū)別...
    紋小艾閱讀 1,999評論 0贊 1
  • 1標準的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？ CSS盒子模型：由四個屬性組成的外邊距(margi...
    秦小婕閱讀 1,299評論 0贊 1

友情鏈接更多精彩內容