浮動

文檔流

文檔流,是指盒子按照html標(biāo)簽編寫的順序依次從上到下,從左到右排列,塊元素占一行,行內(nèi)元素在一行之內(nèi)從左到右排列,先寫的先排列,后寫的排在后面,每個盒子都占據(jù)自己的位置。

浮動特性

1、浮動元素有左浮動(float:left)和右浮動(float:right)兩種

2、浮動的元素會向左或向右浮動,碰到父元素邊界、浮動元素、未浮動的元素才停下來

3、相鄰浮動的塊元素可以并在一行,超出父級寬度就換行

4、浮動讓行內(nèi)元素或塊元素自動轉(zhuǎn)化為行內(nèi)塊元素

5、浮動元素后面沒有浮動的元素會占據(jù)浮動元素的位置,沒有浮動的元素內(nèi)的文字會避開浮動的元素,形成文字饒圖的效果

6、父元素內(nèi)整體浮動的元素?zé)o法撐開父元素,需要清除浮動

7、浮動元素之間沒有垂直margin的合并

清除浮動

父級上增加屬性overflow:hidden
在最后一個子元素的后面加一個空的div,給它樣式屬性 clear:both(不推薦)
使用成熟的清浮動樣式類,clearfix

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J的外補...
    _Yfling閱讀 14,108評論 1 92
  • relative:生成相對定位的元素,通過top,bottom,left,right的位置相對于其正常位置進行定位...
    zx9426閱讀 1,071評論 0 2
  • 浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 特征: 脫離正常文檔流,沿其容器的左側(cè)...
    _Dot912閱讀 801評論 0 3
  • 浮動(float),一個利于布局又影響布局的屬性,先看下w3c上的解釋 A float is a box that...
    蔥油澆蛋閱讀 1,003評論 0 1
  • (注1:如果有問題歡迎留言探討,一起學(xué)習(xí)!轉(zhuǎn)載請注明出處,喜歡可以點個贊哦?。ㄗ?:更多內(nèi)容請查看我的目錄。) ...
    love丁酥酥閱讀 666評論 0 4

友情鏈接更多精彩內(nèi)容