檔案流 1、元素在檔案流中的特點： ? 塊元素：在檔案流中獨占一行；在檔案流中默認寬度是父元素的100%，默認高度是被內容撐開， ? 行內元素：在檔案流中只占自身大小，如果一行不足以容納多個行內元素就會換到下一行繼續從左向右排列； ? 高度是被內容撐開的， 2、元素脫離檔案流后，高度寬度都被內容撐開（行內元素脫離檔案流后會變成塊元素）， 浮動 1、塊元素在檔案流中默認垂直排列，若希望塊元素在頁面水平排列，則通過使用float使元素浮動脫離檔案流， 2、元素脫離檔案流后，他下邊的元素會立刻向上移動， 3、元素浮動后會盡量往頁面的左上或右上浮動，直到遇到**父元素**的邊框 (body也算一個邊框)或其他浮動元素， ? 浮動的元素會蓋住檔案流元素（若兩者不是父子元素的關系）， 4、若浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素（獨占一行）， 5、浮動元素不會超過它上邊的兄弟元素（一行容不下所有浮動元素，則其他浮動元素會自動換行）， 高度塌陷問題 1、子元素無內容或浮動后，父元素高度坍塌，下面所有的元素都會往上頂，頁面布局會混亂， 2、開啟BFC的元素有以下特性： ? a、父元素的垂直外邊距不會和子元素重疊； ? b、不會被浮動元素覆寫； ? c、**可以包含浮動的子元素**， 3、如何開啟（推薦）：給父元素添加overflow：hidden； ? ie6以下瀏覽器不支持BFC，但可以通過開啟haslayout來解決———將元素的zoom設定為1， .box1{ ? zoom:1; ? overflow:hidden; } 高度塌陷解決方案 1、方案一：用clear清除其他浮動元素對當前元素的影響， ? clear 可選值：none 不清除浮動； ? left：清除左側浮動元素對當前元素的影響； ? right：清除右側浮動元素對當前元素的影響； ? both：清除兩側浮動元素對當前元素的影響； ? （實際上是清除對當前元素影響最大的那個元素的浮動） 2、方案二：在高度塌陷的父元素最后添加一個空白的div， ? 用這個空白的div來撐開父元素的高度再對其消除浮動， ? 對空白div有：clear:both; 模板 clearfix:after{ ? content:""; ? display:block; ? clear:both; } clearfix{ ? zoom:1; } <div > <!--誰塌就給誰加clearfix-->
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/63815.html
標籤：Html/Css