css 清除浮動與定位

2021-10-05 12:15:49 字數 1113 閱讀 2007

一、清空浮動的方法

"box1">


"box-1">1


"box-2">2
1.在最後乙個浮動的元素後新增乙個空標籤，並設定樣式：clear:both

"box1">


"box-1">1


"box-2">2


"clear:both">


小結： 優點---寫法簡單   缺點---新增了無意義的標籤
2.給浮動元素的父元素新增樣式：overflow:hidden;

.box1


小結：優點---**簡潔   缺點---內容增多時會導致內容不自動換行，從而使內容被隱藏
3.使用after偽元素清除浮動–定義乙個清除浮動的樣式，加給浮動元素的父元素

//定義清除浮動的樣式


.clearfix:after


.clearfix


/*加給父元素*/


"box1 clearfix">
小結：原理同第一種方法---新增標籤法，不過新增的使偽元素，不會產生無用的標籤，


也沒有設定超出部分隱藏，所有避免了前兩種方法的缺點，推薦使用
4.使用雙偽元素的方式清除浮動，設定樣式並新增給父元素

/*雙偽元素清除浮動元素*/


.clearfix:after,.clearfix:before


.clearfix:after


.clearfix


/*加給父元素*/


"box1 clearfix">
二、定位

1.定位方式

三、浮動、固定定位、絕對定位改變元素的display屬性

四、絕對定位和固定定位的元素居中

.middle

CSS清除浮動和定位

1.原來在一行中的兩個塊，會因為瀏覽器視窗的大小改變而改變其原來的位置 變成多行 瀏覽器視窗寬度不夠容納 解決方法 加個父div,並且設定寬度 father 左右 2.清除浮動clear 當元素有浮動屬性時，會對其父元素或後面的元素產生影響，出現乙個布局錯亂的現象。none 預設值。允許兩邊有浮動物...

CSS浮動與定位

浮動 如果希望塊元素在頁面中水平排列，使用float浮動元素，脫離文件流 可選值 none 預設，元素在文件流中排列 left 元素脫離文件流，向頁面左側浮動 right 元素脫離文件流，向頁面右側浮動 元素浮動後，下邊的元素會立即向上移動 a浮動後，b會直接頂到上面 元素浮動後不會超出父元素邊框和...

CSS浮動與定位

css浮動 clear 向哪邊浮動，清除哪邊 clear left 在左側不允許浮動元素。clear right 在右側不允許浮動元素。clear both 在左右兩側均不允許浮動元素 clear none 預設值。允許浮動元素出現在兩側。clear inherit 規定應該從父元素繼承 clear...