css-浮動
阿新 • • 發佈:2021-11-13
浮動
1.文件流
文件流,指的是元素排版佈局過程中,元素會自動從左往右,從上往下的流式排列。並最終窗體自上而下分成一行行,並在每行中按從左到右的順序排放元素。脫離文件流即是元素打亂了這個排列,或是從排版中拿走。
2.浮動
浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
3.浮動盒子的排列方式:
- none: 預設值,不浮動,為常規流
- left: 靠上靠左排列
- right: 靠上靠右排列
4.浮動特徵
1.塊在一排顯示;
2.內聯元素支援寬高;
3.無論是塊元素還是內聯元素,沒有寬度時預設內容撐開寬度;
4.脫離文件流;
5.提升層級半級。
5.浮動的其他影響
1.對其他浮動元素的影響:後浮動的元素永不會超過先浮動元素的頂端。
2.對普通元素的影響:浮動元素會從文件正常流中刪除,使得緊挨它的元素位置發生偏移,影響佈局。
3.對文字的影響:浮動元素向下延伸時,不會影響正常文字的顯示,文字會相對於浮動元素進行偏移。但部分文字背景會被浮動元素遮住。
6.清除浮動的方法
1.使用帶clear屬性的空元素
在浮動元素後使用一個空元素,並在CSS中賦予clear屬性即可清理浮動。
2.使用CSS的overflow屬性
給浮動元素的容器新增overflow:hidden或者overflow:auto即可以清除浮動。
3.使用CSS的:after偽元素
一個簡單例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #father{ width: 700px; height: 30px; background: lightblue; margin: 100px auto 0; } #son1{ width: 500px; height: 100%; background: lightcoral; /*display: inline-block;*/ float: left; } #son2{ width: 100px; height: 100%; background: lightgreen; /*display: inline-block;*/ float: left; } </style> </head> <body> 浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。 文件流是從上往下 一個一個排列 而浮動之後脫離了原來的文件流 <div id="father"> <div id="son1"></div> <div id="son2"></div> </div> </body> </html>