1、最初的思想:文字繞排。
2、延伸:實現多欄布局。
3、清除浮動的方法:
(1) 給父元素設定overflow:hidden
(2) 同時浮動父元素
(3) 對要清除浮動的元素增加clear:both樣式
(4) 增加新的元素,給該元素設定clear屬性來清除浮動
(5) 對於浮動的元素增加after偽元素
#div1
::after
note:
浮動之後的元素會脫離常規文件流,但其他元素中的文字會包圍在其四周。
(絕對定位完全不佔據空間)
兩個div如果想讓後面的div在前面div的右側,需要對後面的div也進行浮動。
position:static relative absolute fixed
預設值為static
1、static
按照順序進行布局的方式,在原文件流中的位置。
2、relative
relative相對於原來在文件流中的位置。
3、absolute
相對於上乙個非static定位的父元素進行定位。
4、fixed
相對於視口進行定位。
display屬性的值:block、inline、inline-block、none.
CSS 盒模型 屬性 浮動 定位 顯示
border之外是margin,border之內是padding padding之內是width height.margin垂直外邊距疊加,水平外邊距不疊加。上右下左,如圓形鐘錶,從半夜0點開始 width,預設值 auto,會讓元素的寬度與其父元素同寬 float leftorright 建立多欄...
清除浮動及定位
版心 可視區 是指網頁中主體內容所在的區域。一般在瀏覽器視窗中水平居中顯示,常見的寬度值為960px 980px 1000px 1200px等。清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。1 額外標籤法 2 父級新增overflow屬性方法 3 使用after偽元素清除浮動 4...
浮動及定位 字型
float 浮動的相關屬性 對元素 父容器 脫離文件流,對內容半脫離文件流 display 屬性。該屬性規定了元素應該生成的框的型別。常用屬性 預設值 inline,此時元素被顯示為行內元素。block 此時元素被顯示為塊級元素。inline block 此時元素被顯示為行內塊元素。none 此時元...